编辑:我设法让它在 IE 8+9 上使用 <meta http-equiv="X-UA-Compatible" content="IE=7" />
运行但问题仍然存在于 6/7。
我正在努力实现这种效果:
http://img860.imageshack.us/img860/3905/example.png
除了 IE(包括 9 在内的所有版本),我已经在所有浏览器中做到了,没有任何额外的标记:
<div id="content">
<p class="firstPara">Para1</p>
<p>Para2</p>
<p>Para3</p>
</div>
使用这个 CSS:
#content {
width: 700px;
height: 232px;
position: relative;
background: #ccc url('assets/headerImage.png') left top no-repeat;
}
#content p {
background-color: #fafafa;
position: relative;
top: 232px;
width: 440px;
padding: 10px;
}
#content p.firstPara {
position: absolute;
top: auto;
bottom: 0;
background: #eee url('assets/headerTextBack.png') left bottom no-repeat;
}
为了定位第一段,我选择将它设置为绝对位置并将“bottom”属性设置为 0,从而将它放在父 div 的底部,父 div 的高度已设置为与图像。但是在 IE 中,如果静态/相对定位元素的高度总和超过指定高度,则高度似乎会被完全忽略。结果,第一段比它应有的悬垂得更远。最大高度和我为它找到的各种修复似乎都不起作用。
无论如何我都不知所措,除非我将第一段分成不同的 div,否则我似乎根本无法让它在 IE 下工作。
如有任何帮助,我们将不胜感激!
最佳答案
将 overflow:hidden;
添加到您的 #content
部分。
关于html - IE(所有版本)内容溢出时忽略高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5328181/