淘先锋技术网

首页 1 2 3 4 5 6 7

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也会使代码增加复杂性,建议在使用的时候结合实际情况。