CSS中的hack指的是根据不同的浏览器和版本使用不同的CSS代码,以便在不同的操作环境中显示相同的效果。本文将讨论一些CSS的基本常用hack。
1. IE6-IE9 Hack
.selector {
color:#999; /* 所有浏览器都支持 */
_color:#000; /* IE6-IE9 单个下划线*/
*color:#222; /* IE6-IE7 星号*/
+color:#ff0; /* IE6-IE7 加号*/
color:#333\9; /* IE6-IE9 反斜杠9 */
color:#f00\0; /* IE8+ \0 */
}2. IE6 Double Margin Bug Hack
/* 触发IE6双倍边距限制 */
*html .selector {
margin-left:10px; /* IE6 只识别已带*号的hack */
}3. IE6-IE7 z-index Bug Hack
.selector {
position:relative;
z-index:-1; /* 所有浏览器都支持 */
_zoom:1; /* IE6-IE7 单个下划线*/
}4. Firefox -moz-placeholder Hack
/* Firefox的表单placeholder颜色hack */
input::-moz-placeholder {
color:#666;
}5. Safari -webkit-input-placeholder Hack
/* Safari的表单placeholder颜色hack */
input::-webkit-input-placeholder {
color:#666;
}6. Webkit -webkit-background-size Hack
.selector {
background-size:100%; /*所有浏览器都支持 */
_background-size:auto; /*IE6-IE7下划线*/
background-size:contain\9; /*IE6-IE9反斜杠9 */
-webkit-background-size:100%; /*webKit*/
}总结
以上是CSS的一些基本常用hack,有助于在开发中适配不同的浏览器和系统。但是过度使用hack也会使代码增加复杂性,建议在使用的时候结合实际情况。