我有一些 div 框仅在 Internet Explorer 8 中显示溢出/重复图像的问题。它在 Chrome 和 Firefox 中工作正常。
问题图片链接: http://img220.imageshack.us/img220/2209/cssproblem.png
我真的不确定发生了什么……注意。在上图中,我突出显示了与其 div 匹配的 CSS 类。这是我正在使用的一些 CSS 和 HTML 代码:
HTML:(注意:我把框里面的表单元素都去掉了,因为我去掉了,问题依旧)
<div class="introtext">
<h1>Where to Search?</h1>
</div><!--introtext -->
<div class="qms_search_container">
<div class="qms_search_header">
<h2 class="qms_search">What to Search?</h2>
</div><!--#end qms_search_header-->
<div class="qms_search_box" align="left">
<!--Form Stuff -->
</div><!--#end qms_search_box-->
</div><!--#end qms_search_container-->
</div><!--#end intro_banner-->
CSS:
.introbanner {
background:url(../img/header_bg.gif) no-repeat bottom left #FFF;
width:700px;
height:230px;
padding:0 0 30px 0;
margin-bottom:10px;
overflow:hidden;
}
.introtext {
width:194px;
float:left;
color:#FFF;
border-right:2px solid #FFF;
height:206px; background:url(../img/intro_bg_left.gif) no-repeat top left #222935;
padding:12px;
}
.qms_search_container {
float:right;
width:456px;
height:206px;
padding:12px;
overflow:hidden;
background:url('../public/frontend/img/area_banner.jpg') no-repeat top left #ffffff;
}
.qms_search_header {
width:430px;
height:32px;
}
.qms_search_header h2 {
margin:0 0 0 0; padding:0; color:#FFF; font-weight:100; font-size:20px; background-image:none; height:auto;
}
.qms_search_box {
width:436px;
height:164px;
background:url(../img/qms_search_bg.png);
padding:5px;
overflow:hidden;
}
我已经被这个问题困扰了很长时间,非常感谢任何帮助!
谢谢, 丹尼。
最佳答案
来自您发布的链接 samvaughton.com/search ,您在 IE 中的问题区域周围有无效的 HTML。如果您 checkin IE 开发人员工具,<div class="introtext">
似乎没有正确关闭,所以右边的内容被解释为在同一个div
.修复无效的 HTML 后,请确保 float:right
qms_search_container
出现在标记的左侧之前。我认为这应该可以解决您的 <=IE8 问题。
关于html - CSS 和 IE8 的问题,Box 仅在 IE8 中有溢出/重复的图像!请帮忙!,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6884087/