《CSS hack實錄》要點：
本文介紹了CSS hack實錄，希望對您有用。如果有疑問，可以聯系我們。
相關主題：CSS2和CSS3特效
關于IE的CSS HACK，做后端沒想到前端也這么累。總的感覺是IE6-8實在無語。原先有用過，但很久沒碰CSS，都忘了差不多。
文中所用的hack可以參考這2張表：http://www.snjht.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.snjht.com/jiaocheng/41.html
