《CSS hack實(shí)錄》要點(diǎn)：
本文介紹了CSS hack實(shí)錄，希望對(duì)您有用。如果有疑問(wèn)，可以聯(lián)系我們。
相關(guān)主題：CSS2和CSS3特效
關(guān)于IE的CSS HACK，做后端沒(méi)想到前端也這么累。總的感覺(jué)是IE6-8實(shí)在無(wú)語(yǔ)。原先有用過(guò)，但很久沒(méi)碰CSS，都忘了差不多。
文中所用的hack可以參考這2張表：http://www.fzlkiss.com/jiaocheng/40.html
以下是工作中一些有用的HACK記錄：
在input中，IE8對(duì)數(shù)字和文字高度不同影響外圍input的定位：
針對(duì)IE8有效。關(guān)于input中數(shù)字和文字高度不同，在IE6-7下無(wú)此現(xiàn)象。
解決辦法：
添加：
vertical-align :middle\0; \0只對(duì)IE8有效。查了一下，網(wǎng)上有提到IE8的以下幾個(gè)BUG（本例應(yīng)是下面的line-height的BUG）：
IE8中 border的 transparent 不被支持
原有z-index BUG依舊存在
IE8中產(chǎn)生新的BUG：line-heigth BUG
IE8中 display:table依舊不支持
IE的List-item whitespace bug在IE8中依舊存在
另：
color:#0000FF\9; /* 所有IE瀏覽器(ie6+)支持 ；但是IE8不能識(shí)別“*”和“_”的css hack；所以我們可以這樣寫hack */
*height : .. IE7、IE6
_height : .. IE6
因此可以這樣區(qū)分：
color:#0000FF\9; /*ie6,ie7,ie8，因此也可以用于區(qū)分IE和其它瀏覽器*/
*color:#FFFF00; 以及 +color:#FFFF00; /*ie6和IE 7 均可識(shí)別*/
_color:#FF0000; /*只有ie6*/
color:#0000FF\0; /*ie8*/
從下表可知只能用 \0和\9。其它的數(shù)字不管哪個(gè)瀏覽器都不能識(shí)別。
對(duì)于IE6和IE7，可以這樣： +width:348px; _width:324px; 這樣IE7和6會(huì)先識(shí)別348px隨后IE6調(diào)為324px
!important屬性：
瀏覽器識(shí)別：ie7,ie8,firefox,chrome等高端瀏覽器下，已經(jīng)可以識(shí)別 !important屬性， 但是IE 6.0仍然不能識(shí)別，! important，最主要是為了IE 6.0瀏覽器。
關(guān)于Firefox的CSS HACK：
@-moz-document url-prefix(){這里是放css語(yǔ)句的} ,這個(gè)HACK只有firefox識(shí)別, 比如exPad下面的浮動(dòng)定位在FIREFOX出現(xiàn)偏差時(shí)，就可以如下調(diào)整：
#exPad{position:absolute; top:0px; z-index:9999;right:0; display:none;}
/*firefox HACK*/
@-moz-document url-prefix(){#exPad{top:67px;right:153px;}}
關(guān)于Chrome的CSS HACK：
以前用過(guò)的css hack 都是針對(duì)ie，ff，opera，這個(gè)chrome和ff該怎么區(qū)分呢？試了幾個(gè)ie，ff的hack方法，都不行，上網(wǎng)搜索，看到很多人說(shuō)可以用
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { background-color: blue; }
}
來(lái)進(jìn)行chrome 和ff的css hack，經(jīng)測(cè)試上面的寫法，在chrome是有效的，其中關(guān)鍵的是“and (-webkit-min-device-pixel-ratio:0)”，如果把它去掉，則FF\IE\CHROME都有效，無(wú)法做到區(qū)分的目的。
但不知道為什么，如果同時(shí)寫義了幾個(gè)標(biāo)簽，只會(huì)部分有效，
還有一種辦法，如下，其中的a是標(biāo)簽，可以多個(gè)用逗號(hào)隔開(kāi)：
body:nth-of-type(1) a {
color:red;
}
body:nth-of-type(1)這句是選擇第一個(gè)body元素。 經(jīng)測(cè)試， body:nth-of-type(1) 在chrome、opera和firefox都支持這種寫法。hack主要還是前面的一段 @media screen and (-webkit-min-device-pixel-ratio:0)
可以針對(duì)其它標(biāo)簽，比如：
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的背景都改成紅色
也有人說(shuō)body:nth-of-type(1)在FF也無(wú)效，可能是測(cè)試版本不同，在firefox 14.0.1下，對(duì)body:nth-of-type(1)也有效。不能達(dá)到單獨(dú)區(qū)分出chrome的目的。
總結(jié)：
還是用：
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { background-color: blue; }
}
轉(zhuǎn)載請(qǐng)注明本頁(yè)網(wǎng)址：
http://www.fzlkiss.com/jiaocheng/41.html
