Question

我希望有人可以提供帮助。在我的容器DIV中，我有3个图像，我需要并排排成一排。在其他所有浏览器中都是这种情况，除非像往常一样烦人地在IE6，IE7和IE8（呻吟）中。

每个图像都包含在标签中，如下所示： -

<div id="images">

<a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a>

<a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a>

<a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a>

</div><!--end of images-->

我的CSS如下： -

    /* Global reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
    }
    a img, :link img, :visited img {
     border: 0;
     display:block;
     }

    img{
    display:block;
    }
    /* End Global reset */

#images{
width:295px;
clear:both;
border:none;
margin-top:30px;
}

#images a:link{
text-decoration:none;
border:none;

}
#images a:visited{
text-decoration:none;
border:none;    
}
#images a:hover{
text-decoration:none;
border:none;

}

img.img01,img.img02 {
width:98px;
float:left;

}

img.img03{
width:99px;
float:right;

}

无论我做什么，我似乎无法纠正IE中的显示。 IE正在向每个图像的左侧和右侧添加额外的填充，结果是2个图像仅显示在行内，第3个图像显示在其下方（向右浮动）。

我已经尝试删除所有空白区域（我在其他地方遇到的建议），但这没有帮助。我也玩过负利润，但我不想在没有理解实际发生的情况下沿着这条路走下去。

任何人都可以了解一下这里的实际情况以及如何解决？ - 它让我疯了！

非常感谢提前。

Answer 1

IE存在空白问题...尝试删除标记之间的间距并将它们放在一行上。

<div id="images"><a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a><a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a><a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a></div>

Answer 2

你必须看看IE如何计算宽度。 3个图像的总宽度为295，你的div的总宽度为295. div的295宽度是从div的外部测量的，不幸的是div的内容面积小于295.随着实验的增加div的宽度，看看图像是否正确显示。

This是一个描述它的页面。只需在谷歌搜索IE Box模型。

仅在IE中的链接图像上不需要填充

2 个答案: