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”解决方案。