css ie相容寫法

CSS是網頁設計中非常重要的一部分，但是在不同的瀏覽器中，CSS的兼容性是個非常頭痛的問題。特別是在IE瀏覽器中，CSS相容性的問題更為突出。因此，在撰寫CSS樣式時必須注意IE瀏覽器的相容性，本文將介紹一些常用的IE相容寫法。

一、常見的IE瀏覽器相容性問題

在IE瀏覽器中，常見的CSS相容性問題有以下幾個：

1. 盒子模型：IE6、IE7不支援標準盒模型，而是採用了IE盒模型，這就導致了當設定width 和height時，元素的實際寬高和設計寬高有出入。
2. PNG24圖片透明：IE6不支援PNG24圖片的透明，需要使用JavaScript為IE6單獨設定透明。
3. 清楚浮動：IE6不支援瀏覽器的自動清除浮動，需要使用clear:both來手動清除浮動。
4. 定位：IE6不支援position:fixed，可以使用position:absolute來達到相同的效果。

二、常用的IE瀏覽器相容寫法

1. IE6瀏覽器下圖片背景不會被覆寫

在IE6中，如果一個元素同時設定了背景圖和背景顏色，會出現背景圖片不被背景顏色覆蓋的情況。此時需要對容器元素增加一個 _filter 屬性，將其值設為 “inherit” 即可。

<code>.container{
    background:url(images/bg.png) no-repeat;
    background-color:#fff;
    _filter: inherit;
}</code>

2. IE6瀏覽器下border不被覆寫

在IE6中，當兩個區塊狀元素或兩個inline元素相遇時，會出現border不被覆蓋的情況。此時可以透過設定一個空的div來解決這個問題。

<code><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;
}</code>

上述程式碼透過設定position:relative和zoom:1來觸發IE瀏覽器的hasLayout機制，並透過設定一個空的div元素，將border顯示出來。

3. IE6瀏覽器下margin重疊問題

在IE6中，當兩個相鄰元素的margin-top和margin-bottom重疊時，會出現margin重疊的情況。此時可以為上面的元素設定一個padding-top，避免margin重疊。

<code><div class="parent">
    <div class="children"></div>  
</div>

.parent{
    padding-top:1px;    
}

.children{
    margin-top:10px;
    height:50px;
    background:#ccc;
}</code>

4. IE6下PNG24圖片的透明問題

#為了在IE6中支援PNG24圖片的透明，可以在圖片上套用一層div，並在這個div上加上一段JavaScript程式碼。

HTML程式碼：

<code><div class="png">
    <img  src="/static/imghwm/default1.png" data-src="images/logo_bg.png" class="lazy" alt="css ie相容寫法" >
</div></code>

CSS程式碼：

<code>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)
    );
}</code>

上述程式碼中，_behavior屬性可以將JavaScript程式碼綁定到該元素上，並在其內部執行。

5. IE下固定定位的實作

在IE瀏覽器中，無法支援position:fixed屬性，但透過JavaScript可以實現類似的效果。

JavaScript程式碼：

<code>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();</code>

需要注意的是，如果相容於IE7及以上瀏覽器，應該設定DOCTYPE，否則IE將以怪異模式渲染頁面，可能會出現相容性問題。

本文總結了一些常用的CSS IE相容寫法，希望對大家有幫助。在實際專案中，應該不斷總結和探索更好的IE相容寫法，提高網頁的相容性和使用者體驗。

以上是css ie相容寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章！