希望有人能帮忙。在我的容器 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/