html - IE8 的 Css 问题 - 标题中 2 个 div 之间出现奇怪的空间

Question

您可以在以下位置查看问题:

http://www.caterinaligato.com/

我们无法在 IE7 或任何 Firefox 版本上重现该问题。在 IE8 上使用 DeveloperTool 显示填充位于 <div id="bannerArea"> 内, 但是，我们已经尝试了 #bannerArea * { padding:0; margin:0; display:block; }这并没有帮助。

请注意“兼容性 View ”已关闭。

如果有人有任何建议那就太好了!

Answer 1

首先添加 overflow: hidden;到您的 BannerArea 类。我也不相信 star hack 一定是最好的选择。我建议删除它，直到证明您绝对需要它。

最后，确保您的 <a>标签的内容全部在一行中。当 anchor 标记在标记中有换行符时，IE 在正确布局方面存在一定程度的困难，在不应该出现的地方显示空白。

你的标记行:

<div id="bannerArea"><span class="bannerContainer first"><a href="#" class='banner-95 bannerImage' title='' rel='nofollow'><img src="/media/pics/site/imagecache/683C6A596432B154340F913300D76915.jpg" width="958" height="346" alt=''/></a> </span></div>

...将标签分成三行，这可能是导致问题的原因。