CSS兼容性問題一直以來都是Web開發(fā)中亟待解決的問題之一。由于不同的瀏覽器對(duì)CSS的支持不盡相同，所以開發(fā)人員需要在開發(fā)過程中特別注意CSS的兼容性問題，否則可能會(huì)導(dǎo)致頁(yè)面在一些瀏覽器中無法正確顯示。

下面是一些常見的CSS兼容性問題及其解決方案：

/* 解決IE6中PNG透明背景不顯示的問題 */
img {
behavior: url(iepngfix.htc);
}
/* 解決IE6和IE7中寬度不正確的問題 */
div {
*width: 100px; /* *號(hào)只在IE6和IE7中生效 */
}
/* 解決IE6和IE7中不支持opacity的問題 */
div {
filter: alpha(opacity=50); /* IE6和IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* IE8 */
opacity: 0.5; /* 標(biāo)準(zhǔn)瀏覽器 */
}
/* 解決IE6和IE7中不支持position:fixed的問題 */
div {
_position: absolute; /* IE6 */
*left: expression(documentElement.scrollLeft + 10); /* IE6和IE7 */
position: fixed; /* 標(biāo)準(zhǔn)瀏覽器 */
}
/* 解決Firefox中padding和border導(dǎo)致寬度超出問題 */
div {
box-sizing: border-box; /* 標(biāo)準(zhǔn)瀏覽器 */
-moz-box-sizing: border-box; /* Firefox */
}
/* 解決Safari中input寬度自適應(yīng)問題 */
input {
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box; /* 標(biāo)準(zhǔn)瀏覽器 */
}
/* 解決Chrome中嵌套元素錯(cuò)位問題 */
div {
-webkit-transform: translate3d(0, 0, 0); /* Chrome */
}
/* 解決IE9中偽類無法正確渲染的問題 */
div:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1; /* IE6、IE7中需要 */
}
/* 解決IE9中CSS3動(dòng)畫無法正確播放的問題 */
div {
-ms-transform: rotate(45deg); /* IE9 */
}
/* 解決iOS中背景圖片閃爍問題 */
div {
-webkit-backface-visibility: hidden; /* iOS */
backface-visibility: hidden; /* 標(biāo)準(zhǔn)瀏覽器 */
}

總之，要寫出兼容性較好的CSS代碼，開發(fā)人員需要精通所有主流瀏覽器的差異和特點(diǎn)，并在開發(fā)過程中根據(jù)實(shí)際情況進(jìn)行合適的調(diào)整和處理。