CSS hack实录

《CSS hack实录》要点：
本文介绍了CSS hack实录，希望对您有用。如果有疑问，可以联系我们。

关于IE的CSS HACK，做后端没想到前端也这么累。总的感觉是IE6-8实在无语。原先有用过，但很久没碰CSS，都忘了差不多。

文中所用的hack可以参考这2张表：http://www.jb51.cc/jiaocheng/40.html

以下是工作中一些有用的HACK记录：

在input中，IE8对数字和文字高度不同影响外围input的定位：

针对IE8有效。关于input中数字和文字高度不同，在IE6-7下无此现象。

解决办法：

添加：

vertical-align :middle\0; \0只对IE8有效。查了一下，网上有提到IE8的以下几个BUG（本例应是下面的line-height的BUG）：

　　IE8中 border的 transparent 不被支持
　　原有z-index BUG依旧存在
　　IE8中产生新的BUG：line-heigth BUG
　　IE8中 display:table依旧不支持
　　IE的List-item whitespace bug在IE8中依旧存在

另：

color:#0000FF\9; /* 所有IE浏览器(ie6+)支持；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */
*height : .. IE7、IE6

_height : .. IE6

因此可以这样区分：

color:#0000FF\9; /*ie6,ie7,ie8，因此也可以用于区分IE和其它浏览器*/

*color:#FFFF00; 以及 +color:#FFFF00; /*ie6和IE 7 均可识别*/

_color:#FF0000; /*只有ie6*/

color:#0000FF\0; /*ie8*/

从下表可知只能用 \0和\9。其它的数字不管哪个浏览器都不能识别。

对于IE6和IE7，可以这样： +width:348px; _width:324px; 这样IE7和6会先识别348px随后IE6调为324px

!important属性：

浏览器识别：ie7,ie8,firefox,chrome等高端浏览器下，已经可以识别 !important属性，但是IE 6.0仍然不能识别，! important，最主要是为了IE 6.0浏览器。

关于Firefox的CSS HACK：

@-moz-document url-prefix(){这里是放css语句的},这个HACK只有firefox识别,比如exPad下面的浮动定位在FIREFOX出现偏差时，就可以如下调整：

#exPad{position:absolute; top:0px; z-index:9999;right:0; display:none;}

/*firefox HACK*/

@-moz-document url-prefix(){#exPad{top:67px;right:153px;}}

关于Chrome的CSS HACK：

以前用过的css hack 都是针对ie，ff，opera，这个chrome和ff该怎么区分呢？试了几个ie，ff的hack方法，都不行，上网搜索，看到很多人说可以用

@media screen and (-webkit-min-device-pixel-ratio:0) {

　 body { background-color: blue; }

}

来进行chrome 和ff的css hack，经测试上面的写法，在chrome是有效的，其中关键的是“and (-webkit-min-device-pixel-ratio:0)”，如果把它去掉，则FF\IE\CHROME都有效，无法做到区分的目的。

但不知道为什么，如果同时写义了几个标签，只会部分有效，

还有一种办法，如下，其中的a是标签，可以多个用逗号隔开：

body:nth-of-type(1) a {

color:red;

}

body:nth-of-type(1)这句是选择第一个body元素。 经测试， body:nth-of-type(1) 在chrome、opera和firefox都支持这种写法。hack主要还是前面的一段　@media screen and (-webkit-min-device-pixel-ratio:0)

可以针对其它标签，比如：

body:nth-of-type(1) #quick-toolbox-list,ul.quick-toolbox-list-content {

background-color : red;

}

把#quick-toolbox-list和 ul.quick-toolbox-list-content在chrome的背景都改成红色

也有人说body:nth-of-type(1)在FF也无效，可能是测试版本不同，在firefox 14.0.1下，对body:nth-of-type(1)也有效。不能达到单独区分出chrome的目的。

总结：

还是用：

@media screen and (-webkit-min-device-pixel-ratio:0) {

　 body { background-color: blue; }

}

相关推荐