为什么某些DOCTYPE声明造成100％-height表和申报单停止工作？为什么某些DOCTYPE声

在我看来，一些DOCTYPE在IE（6-8）的声明可能会导致浏览器忽略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并仍然允许表伸展？
难道/没有它发生在你身上？
你知道这件事？是众所周知的？

Answer 1:

因为古老的浏览器有奇怪的，不一致的行为和浏览器治疗DOCTYPES就像智力测验，看看作者是写代码的标准，或者他们从W3Schools的十年前的教训。如果你有height: 100%并且父元素的高度为auto则100%是指auto 。
一般情况下，你不知道。它尖叫“ 布局表格 ”。这就是说，设置高度或在HTML和body元素最小高度。还有其他的技术，但我没有在作为，奇怪的是，我从来没有在我需要的技术位置的时刻一个方便的链接。
这是什么浏览器都应该做的，所以...
好吧，我回答这个问题......

Answer 2:

真正解决这个“问题”将是使用下面的CSS：

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

#mydiv {
    height: 100%;
}

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

Answer 3:

当您删除的文档类型，浏览器进入怪癖模式，做不同的事情，以帮助未验证正确呈现旧的代码。

你必须设置高度的容器元素上，以便与100％的高度股利不继承高度：自动;

你可以尝试从过渡到严格的开关，但我怀疑这将解决您的问题。

文章来源: Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?

为什么某些DOCTYPE声明造成100％-height表和申报单停止工作？为什么某些DOCTYPE声

Answer 1:

Answer 2:

Answer 3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮