Question

DIV+CSS在IE6下的兼容问题，圆角矩形作为背景图片，上、中、下之间有间距，不E7、IE8下都能完美融合。

代码如下：
<style type="text/css">
#sleft { width:710px; height:auto; float:left;}
.sleft_top { width:710px; height:9px; background:url(../images/sleft_top.jpg) no-repeat center center;}
.sleft_middle { width:710px; height:auto; background:url(../images/sleft_middle.jpg) center center; padding-bottom:10px;}
.sleft_bottom { width:710px; height:9px; background:url(../images/sleft_bottom.jpg) no-repeat center center;}
</style>
<div id="sleft">
<div class="sleft_top"></div>
<div class="sleft_middle"></div>
<div class="sleft_bottom"></div>
</div>

其中：sleft_top.jpg：宽470，高9 ，sleft_middle.jpg：宽470，高1 ，sleft_bottom.jpg：宽470，高9





Answer 1

IE6出现这种问题是因为IE6里有个默认的12px的值在里面，而这个值就是字体的值，所以楼主你在.sleft_top和.sleft_bottom里面都加上font-size:0;就可以了，同时你写的那个背景图片写得不规范，中间的那个.sleft_middle应该要给一个repeat-y的值而不是怎么都不写，如果说这个宽度超出你你原来背景图片的宽度的话那它也什么向x轴填满就如图

.sleft_top和.sleft_bottom的背景图定义位置上的 center(第二个)其实不用定义，因为你的高度和背景图片的高度是一致的！

Answer 2

IE6有bug,问题肯定在这三个里面你测试。1> IE6 高度 有一个最小值好像是12像素，加上overhide:flow这个属性应该才是实际的9px。2> sleft_middle高度是aotu 而父div高度也是auto. 3> paddlding-bottom:10px; 在这三个里面找，问题肯定在这里面。

Answer 3

好像还有个属性 line-height:0px;

Answer 4

解决方法很多:1.比如用浮动，sleft_top，sleft_middle，sleft_bottom，都浮动，
2.自身有padding和margin 设置为0

Answer 5

用HACK实现吧 偶尔 用用也是可以滴