我已经尝试了各种修复,但我仍然无法解决 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&view=article&id=52&Itemid=56"><span>Class Schedule</span></a></li><li class="item57"><a href="/~domain/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=57"><span>Testimonials</span></a></li><li class="item58"><a href="/~domain/index.php?option=com_content&view=article&id=53&Itemid=58"><span>Contact</span></a></li><li id="current" class="active item59"><a href="/~domain/index.php?option=com_xmap&sitemap=1&Itemid=59"><span>Sitemap</span></a></li></ul> </div>
<div class="moduletable">
Copyright © -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 特有的问题,可能是一些非常小的问题导致了这里的问题 - 谁能找出问题所在?无论我尝试什么,我似乎都无法解决它。
感谢任何帮助。
提前致谢。
最佳答案
您尝试过 Firefox 和 Chrome/Safari 吗?您是否使用标准 DOCTYPE?它们的行为方式应与 IE8 相同。
在标准 CSS 中,容器的高度不会调整为 float 框的高度;我预计 IE8 不会显示容器 (height=0px),因为它是一个更符合标准的浏览器。
如果您要在兼容标准的浏览器中寻找 IE6/7 中的效果,请搜索“clearfix”解决方案。
关于css - IE8 中的背景图片问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4291939/