IE8 中的背景图像问题

Question

我已经尝试了各种修复方法，但仍然无法解决 IE8 中这个相当烦人的问题。我有一个容器 Div，其中包含两个子 Div，一个向左浮动，另一个向右浮动。有一个背景图像应用于容器 DIV，并且在 ie6 和 ie7 中按应有的方式呈现，但在 ie8 中它不会出现。我认为问题是应用于两个子元素的顶部填充没有被 ie8 尊重/应用，并且由于背景图像的高度只有 11px，所以两个子元素与父 DIV 齐平，因此背景图像未显示。

这是我的代码和 CSS：

       <div id="bottom">

        <div class="moduletable_footermenu">
     <ul class="menu"><li class="item56"><a href="/~domain/index.php?option=com_content&amp;view=article&amp;id=52&amp;Itemid=56"><span>Class Schedule</span></a></li><li class="item57"><a href="/~domain/index.php?option=com_content&amp;view=section&amp;layout=blog&amp;id=4&amp;Itemid=57"><span>Testimonials</span></a></li><li class="item58"><a href="/~domain/index.php?option=com_content&amp;view=article&amp;id=53&amp;Itemid=58"><span>Contact</span></a></li><li id="current" class="active item59"><a href="/~domain/index.php?option=com_xmap&amp;sitemap=1&amp;Itemid=59"><span>Sitemap</span></a></li></ul>  </div>

   <div class="moduletable">
     Copyright &#169; -2010 sitename   </div>


  </div><!--end of bottom -->

CSS：

div#bottom {
clear:both;
width:1014px;
margin:0px auto; 
background:url(../images/footer-shadow.gif) top no-repeat;
}

div#bottom div.moduletable {
width:400px;
float:left;
font-size:0.9em;
color:#ccc;
padding:15px 0px 15px 0px;
}

div .moduletable_footermenu{
float:right;
padding:15px 30px 15px 0px;
}

它一定是 IE8 特有的东西，可能是一些很小的东西导致了这里的问题 - 谁能发现这个问题吗？无论我如何尝试，我似乎都无法解决它。

感谢您的任何帮助。

提前致谢。

Answer 1

您尝试过 Firefox 和 Chrome/Safari 吗？您使用标准 DOCTYPE 吗？它们的行为方式应该与 IE8 相同。

在标准 CSS 中，容器的高度不会调整为浮动框的高度；我希望 IE8 不会显示容器（高度=0px），因为它是一个更兼容标准的浏览器。

如果您正在标准兼容的浏览器中寻找 IE6/7 中的效果，请搜索“clearfix”解决方案。