`
北极的。鱼
  • 浏览: 150675 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

网页前端的浏览器兼容

阅读更多

本文只是个人观点，总结了一些网上方案，以及接合部分自己的经验。

 

浏览器的兼容性，细分一下，可以分为HTML,JS, CSS的兼容性。对于HTML的兼容性，比较好处理，高级的功能只能高级的浏览器支持，低级浏览器不用考虑。对于JS的兼容性，主要分IE系列和W3C系列，虽然有些差异，但是处理也不困难，而且有一些比较使用的框架。最麻烦的就是CSS的兼容性，处理的一些思路如下：

 

我觉得要尽量的保证我们的页面在各个浏览器的获得比较好的兼容。首先在开发前要先想好，我们的系统支持的浏览器的版本有哪些？换言之，我们要想好支持的最低版本是哪些？以免等开发好了以后，才意识到还有某个版本的不支持，那样要修改的话，可能是巨大的工程。

 

我们要对主流的浏览器进行分级对待，对不同的现代性级别实现不同的页面。高级版本的浏览器能使用全部的功能，低级的不支持高级功能的浏览器使用另一套支持部分功能的页面。同时提醒用户，如果要体验高级的功能，需要切换到高级浏览器。

 

此外我们的页面还应该使用一些辅助的工具来处理兼容性，同时，我们的代码要尽量符合W3C的标准。我的经验是，写完一个效果后先在chrome和FF里看效果，然后在IE的各个版本中从后往前逐个看效果，这样的好处在于我们的代码尽量向W3C标准靠拢，就能兼容当前大量的主流浏览器，当发现某个IE版本的效果有问题时，修改也有针对性，且修改量小。另一个好处在于能向后兼容。

 

 

分享到：
| 乐观同步
评论
1 楼 北极的。鱼 2016-07-07  
几个常用的CSS效果：

1.色块透明，文字不透明：设置色块的rgba的值,最好设置文字的position防止IE的bug
<body >    
<div style="background:rgba(13,234,145,0.1);width:500px;height:500px;">    
<p style="position:relative">测试文字内容</p>    
</div>


2.图片文字垂直居中：设置图片和文字的父元素的全部子元素垂直居中
<style>  
#test *  
{vertical-align:middle}  
</style>  
  
<body >  
<div style="width:500px;height:500px;">  
<p id=test><img src="IMG_6953.JPG" style="height:200px"/>测试文字内容</p>  
</div>  
</body>


3.色块居中显示：先在水平和垂直方向上绝对偏移50%，然后反向margin负的色块高宽度
<body >    
<div style="background:red;width:100px;height:100px;position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;">    
</div>    
</body>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics