css的hack问题-测试记录

今天在被一位资深的前端工程师面谈以后，他提出页面为了兼容各种浏览器，不可避免的要写hack。在近半年的学习以来，接触hack问题微乎其微，对于页面样式的调整一直处于大差不差就过关的状态。hack的效果如何，一边学习一边记录。

1.CSS hack，为特定浏览器添加一段具有特殊字符标识的代码，结合代码的优先级与覆盖性，特定的浏览器识别hack代码，其他浏览器将丢弃无法解析的该段hack代码。

2.浏览器很多，但只要考虑主流的IE、FF火狐、chrome谷歌即可，市面上常见的其他浏览器，内核都是基于以上浏览器的。（百度出的结果，浏览器的核心大部分是品牌浏览器在研发。）

从图片可以看出，ie支持大部分特殊字符，其他主流浏览器不支持，opera很少支持。

4、常见的特殊符号：

①" - " 和 " _ "：兼容ie6（测了ie5，也识别，不过用ie5的几乎没有了吧！以下就不考虑ie5了…）

②" \9 "：兼容所有ie，包括ie6、ie7、ie8、ie9、ie10 。

③" * " ：兼容 ie6和ie7 。

④" \0 "：兼容ie7以上的所有ie浏览器，包括ie8、ie9、ie10及opera部分支持（不清楚哪部分…）。

⑤" \9\0 "：ie8部分兼容，所以可以确定为对ie9、ie10兼容 。

⑥" \0\9 "：兼容ie7以上的所有ie浏览器，包括ie8、ie9、ie10 。

注：由上可以看出对于ie浏览器，ie6、7、8 、9、10（ \9 ） -> ie6、7 （*）->ie6（- 和 _）。

7、!important符号：

     ie6不识别、ie7 、8、 9、 10识别、FF识别、谷歌识别。

eg：①识别ie6、7和FF：

background:red;

*background:blue;

②区别ie6和ie7：

background:blue !important;

background:red;

（对于识别!important的ie7，一行代码的优先级高于二行，虽然都会读取二行，但是ie6执行二行，ie7一行覆盖二行。）

③区别ie6和ie7和标准浏览器

1>background:red;  *background:blue;  _background:green;

2>background:red;  *background:blue !important;  *background:green;

综上：写css hack的顺序为：FF（标准浏览器）-> ie7 -> ie6。

6、区别ie和非ie浏览器：

     添加" \9 " hack代码，只有ie浏览器可以识别。

7、

----- 未完待续 -----