关于浏览器兼容的总结

浏览器兼容

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

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

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

  • IE8及以下的浏览器:超过16%,用户群体也比较大,但低版本浏览器存在很严重的兼容问题,尤其是h5。

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

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

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

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

  • 2,CSS的hack

    css 的hack: 包含值的hack、选择器的hack。 
    IE6 hack符号:- ,_ 
    书写位置: 书写在某一条属性的属性名前面。表示这条属性只有IE6认识,其他浏览器不认识这个属性名。

      -background: yellow;

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 {}


posted @ 2017-05-02 23:45  circe  阅读(...)  评论(...编辑  收藏