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

标签 image internet-explorer hyperlink padding

希望有人能帮忙。在我的容器 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 个图像出现在其下方(向右浮动)。

我尝试删除所有空白(这是我在其他地方遇到的建议),但这没有帮助。我也尝试过负利润,但我不想在不了解实际情况的情况下走这条路。

任何人都可以阐明这里实际发生的情况以及我该如何解决吗? - 这让我发疯!

提前非常感谢。

最佳答案

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>

关于image - 仅 IE 中的链接图像上不需要的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1809499/

相关文章:

python - 如何使用 pyplot 正确显示图像的红色、绿色和蓝色 (rgb) channel

java - 为什么这不显示我的背景图片 title.png?

css - 简单的 CSS 图像交叉淡入淡出表现怪异

html - 在 IE 中打印 html 图

应用焦点后 HTML 格式正确

internet-explorer - 如何通知用户他的浏览器不受支持

html - 为什么我的某些 HTML 内部链接有效而其他无效?

html - 如何在图片旁边放置文字?

c# - 使用 htmlagilitypack 选择具有特定文本值的节点

c++ - 无法链接到共享库