CSS hack-白红宇

CSS hack

阅读量：4915 次

发布时间：2019-06-11

本文共 3202 字，大约阅读时间需要 10 分钟。

CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla 等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

目前IE内核浏览器仍然是国内主流浏览器，占据着PC浏览器的大部分市场份额，版本从IE6到IE10，所有前段工作者都必须面对和解决多个对代码的兼容性问题。在很多情况下，我们需要专门针对IE写css样式，即针对IE的css hack，下面将详细介绍这些内容：

1、常见的特殊符号的应用：

IE6：

_selector{property:value;}

selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

总结起来，如下：

其中，S表示Standards Mode即标准模式，Q表示Quirks Mode，即兼容模式。

（了解更多Quirks模式、Strict(Standars)模式？）

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important; color:green;	No	No	Yes	No	Yes	No

2、条件注释语句（）

所有的IE可识别

仅IE6可识别

IE6以及IE6以上版本可识别

IE7以下版本可识别

lt 表示less than 当前条件版本以下的版本，不包含当前版本。

gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。

lte 表示less than or equal 当前版本以下版本，并包含当前版本。

3、meta声明

由于IE8 可能会将页面按照 IE7 模式进行渲染，针对多版本IE的现状，通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。

//标准 IE7 模式

//兼容 IE7 模式

//标准 IE 模式

4、其他（/*\**/注释法）

网上也流传着这样一种ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/

.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/

.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/

.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

分析下：
background-color:blue; 各个浏览器都认识，这里给firefox用；

background-color:red\9;\9所有的ie浏览器可识别；

background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；

+background-color:pink; + ie7定了；

_background-color:orange; _专门留给神奇的ie6；

:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}

@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

区别不同浏览器的CSS hack写法：

区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green !important;*background:blue;