为什么某些 DOCTYPE 声明会导致 100% 高度的表格和 div 停止工作？
在我看来，IE（6-8）中的一些 DOCTYPE 声明可能会导致浏览器忽略表格和 div 上的 height="100%" （style ="height:100%")
例如
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">
Hello World
</div>
</body>
</html>
将使用文本的高度渲染DIV，它不会拉伸。删除 DOCTYPE 声明会导致 DIV 根据需要垂直拉伸。
所以我的问题是：
- 为什么会发生这种情况？
- 如何保持
DOCTYPE和仍然 允许表格伸展？ - 这件事发生在你身上吗？
- 你知道吗？众所周知吗？
It seems to me that some DOCTYPE declarations in IE (6-8) may cause the browser to ignore height="100%" on tables and divs (style="height:100%")
E.g
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">
Hello World
</div>
</body>
</html>
Will render the DIV with the height of the text, it will not stretch. Removing the DOCTYPE declaration causes the DIV to stretch vertically as desired.
So my questions are:
- Why does it happen?
- How do you keep the
DOCTYPEand still allow tables to stretch? - Does / did it happen to you?
- Did you know about it?, is it well known?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
因为古代浏览器有奇怪的、不一致的行为，并且浏览器将 Doctype 视为智力测试看看作者是否按照标准或十年前从 W3Schools 学到的东西编写代码。如果您的高度为
height: 100%并且父元素的高度为auto则100%表示auto。一般来说，你不会。它尖叫着“布局表”。也就是说，在 html 和 body 元素上设置高度或最小高度。还有其他技术，但我目前没有方便的链接，因为奇怪的是，我从未处于需要该技术的位置。
这是浏览器应该做的事情，所以......
好吧，我正在回答这个问题......
Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago. If you have
height: 100%and the height of the parent element isautothen100%meansauto.Generally, you don't. It screams "layout table". That said, set heights or minimum heights on the html and body elements. There are other techniques, but I don't have a handy link at the moment as, oddly, I've never been in a position where I needed the technique.
It is what browsers are supposed to do, so …
Well, I am answering this question …
这个“问题”的真正解决方案是使用以下 CSS：
但是请记住，边框会增加高度。
A real solution to this "problem" would be using the following CSS:
However remember that a border adds height.
当您删除文档类型时，浏览器会进入怪异模式，该模式会以不同的方式执行不同的操作，以帮助未经验证的旧代码正确呈现。
您必须在容器元素上设置高度，以便高度为 100% 的 div 不会继承 height: auto;
您可以尝试从过渡性切换到严格性，但我怀疑这会解决您的问题。
When you remove the doctype the browser goes into quirks mode which does things differently to help older code that is not validated to render correctly.
You have to set the height on the container element so the div with 100% height doesn't inherit height: auto;
You could try a switching from transitional to strict but I doubt this will fix your issue.