IE Quirks 模式的问题 - Div 具有固定高度扩展
我在使用 IE8 时遇到了一个奇怪的问题。 页面 DOCTYPE 是 QuirksMode，我无法更改它（我希望可以，但目前没有办法）。宽度被修改以修复 IE 和其他浏览器之间盒式调制解调器解释的差异。 这是一个简单的水平导航栏。它始终有一个边框，所选项目应该稍大一些，以便“覆盖”外边框。在 FF 中工作起来就像一个魅力，但在 IE 中，#container 忽略它的高度属性并扩展以适合它的子级，达到 34px 并且边框不被覆盖。
简化的 HTML 是这样的：
<style>
#container {
padding:0px;
margin:0px;
height:30px;
border-bottom:#000 2px solid;
background-color:#ccc;width:780px
}
#list {
padding:0px;
margin:0px;
height:100%;
float:left;
background-color:#CCFFFF
list-style-type:none;
}
#list li {
float:left;
}
.selected_item {
height:30px;
*height:32px;
border-bottom:#FFF 2px solid;
background-color:#FFCCFF
}
.nonselected_item {
height:28px;
}
</style>
<div id="container">
<ul id="list">
<li class="selected_item">First item</li>
<li class="nonselected_item">Second item</li>
</ul>
</div>
有什么想法吗？ 提前致谢。 安德里亚.
I'm having a weird problem with IE8.
Page DOCTYPE is QuirksMode and I CANNOT change it (I wish I could, but there's no way at this time). Widths are hacked to fix the difference of box modem interpretation between IE and other browsers.
It's a simple horizontal navigation bar. It has a border all along, and the selected item should be a little bigger in order to "cover" the outer border. Works like a charm at FF, but in IE, the #container ignores it's height property and expands to fit it's childs, gets up to 34px and the border is not covered.
The simplified HTML is this:
<style>
#container {
padding:0px;
margin:0px;
height:30px;
border-bottom:#000 2px solid;
background-color:#ccc;width:780px
}
#list {
padding:0px;
margin:0px;
height:100%;
float:left;
background-color:#CCFFFF
list-style-type:none;
}
#list li {
float:left;
}
.selected_item {
height:30px;
*height:32px;
border-bottom:#FFF 2px solid;
background-color:#FFCCFF
}
.nonselected_item {
height:28px;
}
</style>
<div id="container">
<ul id="list">
<li class="selected_item">First item</li>
<li class="nonselected_item">Second item</li>
</ul>
</div>
Any ideas?
Thanks in advance.
Andrea.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
使用 Quirks DOCTYPE，您要求 IE 假装它是 IE6（或多或少）。如果它确实是一个不可变的 DOCTYPE，那么您要么必须按照 IE6 怪癖和编码，就像十年来的 webslingers 必须做的那样，或者找到某种方法告诉 IE8 永远不要尊重怪癖。
工程是关于权衡的；是的，我知道您可能无法更改该关键任务页面中的一个单词，并且您将花费巨大的精力来按照 2001 年以来的浏览器标准进行编码，但如果这些是限制，那么就这样吧。
With a Quirks DOCTYPE, you are asking IE to pretend it is IE6 (more-or-less). If it is truly an immutable DOCTYPE, then you either have to code to IE6 quirks and proper markup as a decade of webslingers have had to or find some way to tell IE8 to never respect Quirks.
Engineering is about tradeoffs; yeah, I understand that you may not be able to change that one word in that mission critical page and that it will cost you immense effort to code to browser standards from 2001, but if those are the constraints, so it goes.
第一行，没有定义类型，尝试
在第 7 行，您在 width background-color:#ccc;width:780px 之后错过了一个分号，
尝试添加 max-height:32px;到#list李
first line, no type defined, try <style type='text/css'>
on the 7th line you missed a semicolon after width background-color:#ccc;width:780px
try adding max-height:32px; to #list li
尝试添加position:absolute到#list
Try adding position:absolute to #list
感谢您的回答 Alohci，这成功了！
MSW，也感谢您的回答，但是这个应用程序每天有大约 5000 个用户使用，还有 40 个运行相同代码的高效网站，我们应该上传和测试大约 2000 个页面才能更改文档类型。而且...我们不会经常遇到这种 CSS 问题，因为结构不会经常改变。我们每年可能会有一两个这样的，所以现在改变文档类型的努力是不合理的。当我们需要实施影响所有 40 个网站且无法通过其他方式实现的更改时，我们将对其进行更改。
Thank you for your answer Alohci, that did the trick!
MSW, thank you for your answer too, but this application is used by about 5 thousand users a day, along 40 productive websites that run on the same code, and we should upload and test about 2 thousand pages in order to change doctype. AND... we don't have this kind of CSS problems often because structure doesn't change ofte. We may have one or two of this ones a year, so the effort to change doctype is not justified right now. We'll change it the day that we need to implement a change that affects all 40 websites and cannot be achieved otherwise.