不同的瀏覽器對CSS的解釋都有一點出入,特別是padding, line-height這些要細微控制的地方,下面的hack基本可以解決這個問題:
• 在屬性前加下劃線(_),那么此屬性只會被IE6解釋
• 在屬性前加星號(*),此屬性只會被IE7解釋
• 在屬性值后面加"/9",表示此屬性只會被IE8解釋
各瀏覽器CSS hack兼容表:
| IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
| !important | Y | Y | ||||
| _ | Y | |||||
| * | Y | Y | ||||
| *+ | Y | |||||
| /9 | Y | Y | Y | |||
| /0 | Y | |||||
| nth-of-type(1) | Y | Y |
#test{
color:red; /* 所有瀏覽器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red/9; /* IE6、IE7、IE8支持 */
color:red/0; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
整體測試代碼示例:
.test{
color:#000000;
color:#0000FF/0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}
#menu { line-height: 23px; }/* firefox 瀏覽器實行這句定義 */
新聞熱點
疑難解答