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 不会显示容器 (height=0px)，因为它是一个更符合标准的浏览器。

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