【兼容】CSS hack 技巧总结

什么是CSS hack?

    要了解css hack，首先我们可以从它的目的出发。

   很多时候写完一个页面，自己在不同浏览器查看就发现出问题了，有的样式在这个浏览器能准确表现，但是在另一个浏览器却不能被识别。哪怕是在同一个浏览器下的不同版本，也会有所差异，例如ie。css hack就是为了解决各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差的解决方案。

 

CSS hack 的种类

    为什么css hack会有不同的种类？其实这个种类的定义是根据作用在不同地方而进行划分的。css hack 主要有属性集hack、选择器hack和头部引用hack。

    下面将举例说明这三种的写法【均以ie6为例】：

  属性集 hack 示例：  IE6    下划线"_" 和  星号"*"   一般写法【.btn{color: blue;} 】 针对 IE6的hack 写法是：【.btn{_color: blue;}/*仅IE6识别*/】

  选择器hack 示例：   IE6    *html .class{}   一般写法【.btn{color: blue;} 】 针对 IE6的hack 写法是：【*html .btn{color: blue;}  /* 仅IE6 识别 */】

  头部引用hack 示例：  IE6    <!--[if IE 6]> 这段样式只在IE6浏览器显示 <![endif]-->

    

浏览器css解析字符识别对照一览表

我们可以先看看下面两个对比表格【图是直接套用图片，如有侵权或者其他问题的可以联系删除】：    

 图一：主流浏览器css解析的字符识别对比表

图二：IE浏览器各版本css解析的字符识别对比：

由上面两个表格的参数，我们可以总结出来：

• ";" 在各大主流浏览器中均可以被识别，而"\9"能被所有的IE浏览器所识别【不仅仅是IE6-8哦】；
• "-"与"_"仅仅在IE6可以被识别；

【个人意见：对于各大主流浏览器都能识别的字符，个人觉得实际作用不大，因为一般的css基本上可以作用在大部分的浏览器上。目前很多页面对开发人员的要求是兼容到IE8以上的版本，只有部分要考虑兼容到IE6，但是了解更多，考虑更多的浏览器兼容性，也是一件很重要的事情。】

 

IE 浏览器 css hack

     通过上表，我们可以轻松的根据字符识别差异来区别IE浏览器与非IE浏览器，对于IE浏览器的各个版本，我们要如何区分？

     首先，我们知道 IE6跟7同时支持"*"，而"-"与"_"仅仅可以被IE6所支持，可以轻松的区分出来IE6与7;但是像IE8/9我们要怎样区分呢？

         ①"\0"与"\0\9"都可以被IE8/9所支持，但是考虑到"\0"被opera浏览器的部分属性所支持，所以我们可以一般可以选用"\0\9";

         ②IE9没有专属的Ihack，但可以通过变通实现，这里要提及到css3 的伪类的妙用，ie9及以上的IE浏览器及所有主流浏览器均支持的 :root 选择器

这里是IE css hack的示例写法：

    element{
         color：#666\9；       //for IE8、9
         * color：#999；        //IE7
        _color:#EBEBEB；      //IE6
    }
   :root element{color：#666\9;}// for IE9 only  

 最后的一行就是为了把ie9单独进行区分定义的 css hack，你看懂了吗？

 

其他主流浏览器 css hack

     除上一点说到的IE浏览器外，目前主流的浏览器有 google chrome 、firefox、safari、opera 这四个。【360浏览器就不列入了，因为应用的是ie的内核，极速模式应用的是webkit内核】

• Chrome和Safari等Webkit核心浏览器的CSS hack

  @media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit内核css hack */ }

• firefox浏览器的CSS hack

  @-moz-document url-prefix() { /* firefox css hack */ }

• opera浏览器的CSS hack

  @media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) {/* opera css hack */ }

写在最后

     除了css hack 外，还有使javascript代码能够在不同浏览器下正常运行的 javascript hack，和可以根据客户端的介质和屏幕大小，提供不同的样式表或者只展示样式表中的一部分的媒体查询hack，这里没有展开延伸。本文总结纯粹是个人的学习笔记，如果有任何错误的地方，欢迎指出共同进步哈。