为什么某些DOCTYPE声明导致100％-height表和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并仍然允许表拉伸？这件事发生在你身上吗？你知道吗？，它是众所周知的吗？

已邀请:

3 个回复

炬卤遁蝎变

因为古老的浏览器具有奇怪的，不一致的行为，浏览器将Doctypes视为智能测试，以确定作者是在编写标准代码还是他们在十年前从W3Schools学到的东西。如果你有height: 100%并且父元素的高度是auto那么100%意味着auto。一般来说，你没有。它尖叫“布局表”。也就是说，在html和body元素上设置高度或最小高度。还有其他技术，但我目前没有方便的链接，奇怪的是，我从未处于需要技术的位置。这是浏览器应该做的，所以...... 好吧，我正在回答这个问题......

盛虱

这个“问题”的真正解决方案是使用以下CSS：

html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

#mydiv {
    height: 100%;
}

但请记住，边框会增加高度。

翰冒绢县

当您删除doctype时，浏览器会进入quirks模式，这会以不同方式执行操作，以帮助未经验证的旧代码正确呈现。你必须在容器元素上设置高度，所以高度为100％的div不会继承高度：auto; 您可以尝试从过渡到严格切换，但我怀疑这将解决您的问题。

要回复问题请先登录或注册

为什么某些DOCTYPE声明导致100％-height表和div停止工作？

3 个回复

发起人

transitional

问题状态

为什么某些DOCTYPE声明导致100％-height表和div停止工作？

与内容相关的链接

3 个回复

发起人

transitional

问题状态