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来解决这个问题。
.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重叠。
.parent{ padding-top:1px; } .children{ margin-top:10px; height:50px; background:#ccc; }
- IE6下PNG24图片的透明问题
为了在IE6中支持PNG24图片的透明，可以在图片上套一层div，并在这个div上加上一段JavaScript代码。
jQuery仿京东图片变亮变暗效果，鼠标悬停图片之后该图片变亮，其他图片变暗。移开鼠标所有图片变亮。兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、head区域引用文件lrtk.css及js库，animate.js是另外编写的动画函数。
HTML代码：
CSS代码：
div.png{
position:relative;
_behavior: expression(
function( ele ){
ele.innerHTML = '';
}(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兼容写法，提高网页的兼容性和用户体验。
