《CSS hack实录》要点：
本文介绍了CSS hack实录，希望对您有用。如果有疑问，可以联系我们。
相关主题：CSS2和CSS3特效
关于IE的CSS HACK，做后端没想到前端也这么累。总的感觉是IE6-8实在无语。原先有用过，但很久没碰CSS，都忘了差不多。
文中所用的hack可以参考这2张表：http://www.vephp.com/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; }
}
转载请注明本页网址：
http://www.vephp.com/jiaocheng/41.html
