本文详细介绍了多种CSS Hack技巧，包括选择器Hack、属性Hack和Query Hack等，旨在帮助开发者解决不同浏览器间的兼容性问题。
即便是标准浏览器，也会由于渲染引擎不同导致网页显示效果存在差异，因此，针对这些差异而存在的Hack就很多啦。别跟我提IE6！
1、选择器Hack
* html selector
仅仅被 ie6- 渲染，因为html在W3C标准规定中已经是根元素，再加通配符 * 将会被其他浏览器忽略。慎用通配符！
*+html selector
ie7。
*:first-child+html selector
ie7，与上一条不同的是，当ie9调整到ie7标准模式下时此条失效。
html>body selsecor
ie6-皆不支持父子选择器。
html>/**/body selector
排除了ie6与ie7。
selector:not(X)
not是CSS3的一个伪类，称之为“否定伪类”，用于否定的描述性运算。ie8-与Opera9-不支持
body:not(:-moz-handler-blocked) selector
Gecko专属属性，只有Firefox 3.5+，Thunderbird与Seamonkey能够识别并正确渲染。
2、属性Hack
property:value;
p\r\o\p\e\r\t\y:value;
反斜杠作为十分特别的字符，在属性Hack里十分常用，此条属性Hack会被除ie6-以外的浏览器忽略。
property:value\0;
标准的 \0 hack，ie8+、Firefox2-或部分Opera版本都能识别并渲染。
property:value\9;
ie所有版本都能识别并渲染，ie10未知。用于区别ie与其他内核浏览器。
property:value!ie;
属性之后的叹号可以出现任何字符，在ie7-中作用与!important相同，在ie8+会被忽略。
*property:value;
著名的star hack，ie7-能识别并渲染，用于区别ie6、ie7与其他浏览器。
PS：*可被以下任意字符替代：! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
变种的写法：//property:value;
PS：*可被以下任意字符替代：! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
变种的写法：//property:value;
_property:value;
针对ie6被广泛使用的下划线hack。
property: /**/value;
除ie6外所有浏览器都能识别的hack，值得注意的是属性property:与注释/**/之间的空格是必须的。
property: /*\**/value\9;
与上条不同的是，加入\9hack后，ie之外的浏览器全部忽略了这条规则。属性后的空格依然是必须的。
需要注意hack后分号对浏览器的影响。
有分号：ie7识别；
无分号：ie7忽略；
ps:如果使用了无分号的hack，则不能再在同一个定义里添加规则，需要分别重新定义。
需要注意hack后分号对浏览器的影响。
有分号：ie7识别；
无分号：ie7忽略；
ps:如果使用了无分号的hack，则不能再在同一个定义里添加规则，需要分别重新定义。
property:value\0/;
ie8识别，ie9部分识别。
3、Query Hack
@media secrrn and(-webkit-min-device-pixel-ratio:0){...}
所有的webkit内核均匹配（Sarfari 3+，Chrome 1+），包括移动版。另外，经测试，Opera 9.0也会很诡异的匹配。
@media secrrn\9{...}
熟悉吗？但和属性hack的差异比较大，只有ie7以下才会渲染这样的规则。
@media \0sreen,\9screen{...}
与上条相比，多了个ie8。
@media \0sreen{...}
ie8- 与Firefox 3.6-识别。
@media sreen\0{...}
更为标准的\0 hack，相对上一条多了个ie9。
@-moz-document url-prefix(){
.firefox{
property:value;
}
}
针对Firefox的Hack。
扫一扫
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
