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

IE8中的背景图像问题

1 个答案: