转载网页博客：ie7bug:div容器下的img与div存在间隙

1、代码及在浏览器上的显示

ie7：

ie7

ie8+:

ie8+

Firefox:

firefox

Chrome:

chrome

可以看出ie7上在div容器下添加img，div与img中有间隙，而在ie8+和其他浏览器上均显示正常

网页源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>ie7 bug: img and div</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body>div{
                margin:50px auto;
                width:800px;
            }
            div.div0{
                float:left;
                margin:10px 20px;
                width:90px;
                border:2px solid #ff0000;
            }
            div.div1{
                float:left;
                margin:10px 20px;
                width:8px;
                border:2px solid #ff0000;
            }
            div.div2{
                float:left;
                margin:10px 20px;
                width:90px;
                border:2px solid #ff0000;
            }
            div.div3{
                float:left;
                margin:10px 20px;
                width:10px;
                border:2px solid #ff0000;
            }
            div.div4{
                float:left;
                margin:10px 20px;
                width:10px;
                border:2px solid #ff0000;
            }
            img{
                float:left;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="div0">
                <img src="login_on.gif">
            </div>
            <div class="div1">
                <img src="led.png">
            </div>
            <div class="div2">
                <img src="login_on.gif">
                <img src="logout.png">
            </div>
            <div class="div3">
                <img src="led.png">
                <img src="reset.png">
            </div>
            <div class="div4">
                <img src="actLink.png">
                <img src="reset.png">
            </div>
        </div>
    </body>
</html>

2、解决问题

解决这个bug有多种方法：

1) 在子标签内加入css hack,*margin-bottom:-4px;

此方法不够完美，只适合图片的高度比较大的情况，可以看到下图中，利用此种方法只有第一个和第三个适合，其他的img与div的上部有间隙。

css hack

2) 给img加样式display:block; 将图片转为块级元素

如下图，img{display:block;}

display:block

3)设置图片的垂直对齐方式

如下图，img{vertical-align:top;}

vertical-align

4) 设置父对象的字体大小为0px

如下图，body>div>div{font-size:0;}

font-size:0

5) 设置图片的浮动属性

如下图，img{float:left;} or img{float:right;}

float:left

posted on 2014-10-18 21:17  加油_linda  阅读(392)  评论(0)  编辑  收藏  举报