关于浏览器兼容的总结

最新推荐文章于 2019-04-28 17:21:48 发布

weixin_30367873

最新推荐文章于 2019-04-28 17:21:48 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/gucan/p/6799412.html

版权

全球五大浏览器：IE， Chrome, FireFox, Opera, Safari.
百度统计：流量研究院。

IE8----win7     IE7----vista
IE9----win8     IE10----win10

高级浏览器：包括Chrome,qq,搜狗,百度等浏览器使用的都是webkit内核，一共占有市场份额超过60%。 webkit内核度h5,c3的特性支持的很好。

兼容性：
更多体现在对h5，c3的新特性支持上。
测试对h5新特性支持: https://www.html5test.com

关于css hack
实际工作中，只会上传同一份代码，提供给所有的用户进行下载，根据用户浏览器渲染效果不同，会出现兼容，为了解决兼容问题，需要在同一份代码中，书写不同的代码结构，加载给不同浏览器，实现相同的渲染效果。这种在同一份文件为不同浏览器书写不同html和css的方式就是hack。

  <!--IE9及以下可以看到-->
<!--[if lte IE 9]>
           <h1>IE9及以下浏览器能看到</h1>
      <![endif]-->

注意：IE浏览器的HTML的hack只设置到IE9版本，从IE10开始不管hack符怎么，都认为是注释。
用于给某个特定浏览器解决兼容问题。例如IE6中解决图片背景图片透明和半透明问题。
用于提示用户浏览器版本与要求是否相符合，设一个友情提示。

IE7 及以下：
hack 符号: ! $ & * ( ) = % + @ 等等。

 !background: yellow;

IE8 浏览器：

background: yellow\0/;

IE8/9/10浏览器：

background: yellow\0;

IE10及以下的IE浏览器都能正常加载：

background:  yellow\9;

CSS 选择器 hack：
通过给选择器书写hack方式，只有一部分浏览器能够正常选中元素，其他浏览器认为没有这样的选择器。

IE6及以下：

* html div {
width: 100px;
height: 100px;
background: #c0c;
 }

IE7及以下：

   div, {}

IE8以上及高级浏览器：并集选择器最后一个选择器后面一定不能加逗号，认为选择器书写错误。
IE7及以下：先把前面列举过的选择器选中元素加载样式
IE6浏览器不认识子级选择器和兄弟选择器，IE7不能忽视注释带来的效果。

/* Everything but IE 6 */ 
html > body .selector {} 

/* Everything but IE 6/7 */ 
html > /**/ body .selector {}   
head ~ /* */ body .selector {}

转载于:https://www.cnblogs.com/gucan/p/6799412.html

关注