css是网页设计中非常重要的一部分，但是在不同的浏览器中，css的兼容性是个非常头疼的问题。特别是在ie浏览器中，css兼容性的问题更为突出。因此，在编写css样式时必须注意ie浏览器的兼容性，本文将介绍一些常用的ie兼容写法。
一、常见的IE浏览器兼容性问题
在IE浏览器中，常见的CSS兼容性问题有以下几个：
- 盒模型：IE6、IE7不支持标准盒模型，而是采用了IE盒模型，这就导致了当设置width 和 height时，元素的实际宽高和设计宽高有出入。
- PNG24图片透明：IE6不支持PNG24图片的透明，需要使用JavaScript为IE6单独设置透明。
- 清楚浮动：IE6不支持浏览器的自动清除浮动，需要使用clear:both来手动清除浮动。
- 定位：IE6不支持position:fixed，可以使用position:absolute来达到相同的效果。
二、常用的IE浏览器兼容写法
- IE6浏览器下图片背景不被覆盖
在IE6中，如果一个元素同时设置了背景图和背景颜色，会出现背景图片不被背景颜色覆盖的情况。此时需要对容器元素增加一个 _filter 属性，将其值设置为 “inherit” 即可。
立即学习“前端免费学习笔记（深入）”；
.container{
background:url(images/bg.png) no-repeat;
background-color:#fff;
_filter: inherit;
}- IE6浏览器下border不被覆盖
在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重叠问题
在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图片的透明问题
为了在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下固定定位的实现
在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兼容写法，提高网页的兼容性和用户体验。
