仅在 IE 中对链接图像进行不需要的填充答案

【问题标题】：Unwanted padding on link images in IE only仅在 IE 中对链接图像进行不需要的填充
【发布时间】：2010-12-21 00:54:13
【问题描述】：

我希望有人可以提供帮助。在我的容器 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 张图像仅显示在该行内，而第三张图像出现在其下方（向右浮动）。

我已尝试删除所有空白（我在其他地方遇到的一个建议），但这并没有帮助。我也玩过负边距，但我不想在不了解实际情况的情况下走这条路。

谁能解释一下这里到底发生了什么以及我该如何解决？ - 快把我逼疯了！

提前非常感谢。

【问题讨论】：

能不能在jsbin.com上放个测试页面然后大家看看上面css的结果是什么

标签： image internet-explorer hyperlink padding

【解决方案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>

【讨论】：

【解决方案2】：

你得看看IE是如何计算宽度的。 3 张图像的总宽度为 295，您的 div 的总宽度为 295。div 的 295 宽度是从 div 的外部测量的，不幸的是 div 的内容区域小于 295。作为实验增加div的宽度，看看图片是否正常显示。

This 是描述它的一页。只需在 google 中搜索 IE Box Model 即可。

【讨论】：