css - 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 中，容器的高度不会调整为 float 框的高度；我预计 IE8 不会显示容器 (height=0px)，因为它是一个更符合标准的浏览器。

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