网页前端的浏览器兼容

北极的。鱼

浏览: 158920 次
性别:
来自: 上海

最近访客更多访客>>

collen7788

zzc125

tianxizhong

kelly_zsl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html
Javascript
CSS

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

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

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

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

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

分享到：

【转】JavaScript图解继承(多图) | 乐观同步

2016-07-07 14:59
浏览 571
评论(1)
分类:Web前端
查看更多

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>

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论