最近在進行網頁設計時,發現使用IE8瀏覽器訪問網站時,發現頁面樣式出現了問題,經過排查發現是由于IE8瀏覽器不兼容部分寫入的CSS的原因。
p {color:red; border:1px solid black;} div { background-color: #f5f5f5; border: 1px solid #ddd; padding: 5px; }
比如上面這段CSS代碼中,IE8瀏覽器不支持使用透明度屬性opacity,opacity用于設置元素的不透明度。而在IE8瀏覽器中必須使用filter:alpha(opacity=n),其中n的取值范圍是0~100。如果我們想讓一個元素逐漸顯示,可以使用如下代碼:
div { opacity:0; filter:alpha(opacity=0); } div:hover { opacity:1; filter:alpha(opacity=100); }
除此之外,IE8瀏覽器還有一些其他的不兼容寫法,比如 width、height、padding、margin等屬性在IE8中的解析方式也與其他現代瀏覽器不同。針對這些問題,我們需要針對IE8瀏覽器單獨寫一些CSS樣式,來解決樣式兼容問題。
總之,在網頁設計中我們要考慮到不同瀏覽器對CSS的解析方式的不同,遇到不兼容問題,我們可以針對性的解決問題,保證網站在不同瀏覽器下都能達到一致的外觀效果。