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中文网其他相关文章！
