css兼容的各种 写法 |css 文字图片混合

/* 1.ie6浏览器的特殊处理 */
.element {
_border: 2px solid red; /* _border是ie6独有属性 */
zoom: 1; /* 触发ie6的haslayout属性，解决一些布局bug */
}
/* 2.ie6、ie7浏览器的透明度处理 */
.element {
background-color: #000000;
filter: alpha(opacity=50); /* ie6、ie7 */
-moz-opacity: 0.5; /* firefox */
-khtml-opacity: 0.5; /* safari、chrome */
opacity: 0.5; /* css3 */
}
/* 3.ie7浏览器的hack写法 */
.element {
/*_height: 50px;*/ /* 双“_”只对ie7等浏览器生效 */
*height: 50px; /* 只对ie7浏览器生效 */
height: 100px; /* 标准写法 */
}
/* 4.webkit内核浏览器的特殊处理 */
.element {
-webkit-box-shadow: #ccc 1px 1px 5px; /* safari、chrome独有属性 */
}
/* 5.firefox浏览器的特殊处理 */
.element {
-moz-box-shadow: #ccc 1px 1px 5px; /* firefox独有属性 */
}
/* 6.css3的特殊处理 */
.element {
-webkit-border-radius: 5px; /* safari、chrome、opera浏览器独有 */
-moz-border-radius: 5px; /* firefox浏览器独有 */
border-radius: 5px; /* css3标准写法 */
}
/* 7.ie8、ie9浏览器的特殊处理 */
.element {
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; /* ie8、ie9浏览器独有 */
filter: alpha(opacity=50); /* ie6、ie7 */
opacity: 0.5; /* css3 */
}

以上几种写法都是针对特定浏览器实现的兼容性处理，能够有效地解决兼容性问题，为网页设计提供了更大的发挥空间。大家在实际使用中，应根据不同需求灵活运用这些写法，写出兼容性更好的CSS代码。