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

我希望有人可以提供帮助。在我的容器DIV中，我有三张图像，我需要并排坐在一排。在其他所有浏览器中的情况确实如此，除了像往常一样，在IE6，IE7和IE8（呻吟声）中令人讨厌。仅在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><!--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张图片只显示在该行内，第三张图片出现在下方（右侧悬浮）。

我试图删除所有的空白（我在其他地方遇到的建议），但没有帮助。我也玩过负边距，但我宁愿不理解实际发生的情况而沿着这条路线走下去。

任何人都可以请介绍一下这里发生了什么，以及我如何解决？ - 它正在让我疯狂！

非常感谢提前。

来源

2009-11-27 qpidity

你可以在jsbin.com上张贴测试页然后我们都可以看到上面css的结果是什么 – ekhaled 2009-11-27 16:03:41

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

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

来源

2009-11-27 16:04:00

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>

来源

2009-11-27 19:58:14 CaffGeek

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

回答

相关问题