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="images/logo_bg.png" />
</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中文网其他相关文章！