CSS是網頁設計中非常重要的一部分，但是在不同的瀏覽器中，CSS的兼容性是個非常頭痛的問題。特別是在IE瀏覽器中，CSS相容性的問題更為突出。因此，在撰寫CSS樣式時必須注意IE瀏覽器的相容性，本文將介紹一些常用的IE相容寫法。
一、常見的IE瀏覽器相容性問題
在IE瀏覽器中，常見的CSS相容性問題有以下幾個：
二、常用的IE瀏覽器相容寫法
在IE6中，如果一個元素同時設定了背景圖和背景顏色，會出現背景圖片不被背景顏色覆蓋的情況。此時需要對容器元素增加一個 _filter 屬性，將其值設為 “inherit” 即可。
.container{
background:url(images/bg.png) no-repeat;
background-color:#fff;
_filter: inherit;
}在IE6中，當兩個區塊狀元素或兩個inline元素相遇時，會出現border不被覆蓋的情況。此時可以透過設定一個空的div來解決這個問題。
<div class="box">
<div class="inner"></div>
</div>
.box{
background:#fff;
border:1px solid #ccc;
position:relative;
zoom:1;
}
.inner{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}上述程式碼透過設定position:relative和zoom:1來觸發IE瀏覽器的hasLayout機制，並透過設定一個空的div元素，將border顯示出來。
在IE6中，當兩個相鄰元素的margin-top和margin-bottom重疊時，會出現margin重疊的情況。此時可以為上面的元素設定一個padding-top，避免margin重疊。
<div class="parent">
<div class="children"></div>
</div>
.parent{
padding-top:1px;
}
.children{
margin-top:10px;
height:50px;
background:#ccc;
}#為了在IE6中支援PNG24圖片的透明，可以在圖片上套用一層div，並在這個div上加上一段JavaScript程式碼。
HTML程式碼：
<div class="png"> <img src="images/logo_bg.png" /> </div>
CSS程式碼：
div.png{
position:relative;
_behavior: expression(
function( ele ){
ele.innerHTML = '<span style="display:inline-block;width:' + ele.offsetWidth + 'px;height:' + ele.offsetHeight + 'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ ele.getElementsByTagName('img')[0].src + '\',sizingMethod=\'scale\')"></span>';
}(this)
);
}上述程式碼中，_behavior屬性可以將JavaScript程式碼綁定到該元素上，並在其內部執行。
在IE瀏覽器中，無法支援position:fixed屬性，但透過JavaScript可以實現類似的效果。
JavaScript程式碼：
function fixedPosition() {
var obj = document.getElementById("fixed_obj");
var top = (document.documentElement.clientHeight - obj.offsetHeight) / 2 + document.documentElement.scrollTop;
obj.style.top = top + "px";
}
window.onscroll = fixedPosition;
//初始时就调用一次以免刷新后没有滚动事件而没有效果
fixedPosition();需要注意的是，如果相容IE7及以上瀏覽器，應該設定DOCTYPE，否則IE將以怪異模式渲染頁面，可能會出現相容性問題。
本文總結了一些常用的CSS IE相容寫法，希望對大家有幫助。在實際專案中，應該不斷總結和探索更好的IE相容寫法，提高網頁的相容性和使用者體驗。
以上是css ie相容寫法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
