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代碼。