IE6/7下两张图片拼在一起,中间白线问题

今天在处理一个bug的时候发现IE6/7下面的一个没见过的bug

通常在将两者图片拼成1张完整的图片的时候,为消除IE下的白线【图中所示】,都会给img加一个display:block样式。

但是我昨天遇到一个bug,加block之后反而出现了白线。仔细一排除原来是样式重置中的一句惹得祸!

<style type="text/css">
    body{margin:0;padding:0}
    img,a img{border:0}
    img,select,input,button{vertical-align:middle} //产生问题的一句
    #main{width:960px;margin:50px auto}
    #main img{display:block}
</style>

<div id="main">
    <img src="images/3_01.jpg"  width="720" height="70" alt=""/>
    <img src="images/3_02.jpg"  width="720" height="70"  alt=""/>
</div>

vertical-align:middleblock 其中任意一个都能使两张图片紧贴在一起,但是同时使用白线就会出现

posted @ 2011-02-11 11:10  jmkl008  阅读(1309)  评论(0编辑  收藏  举报