设置 div 最大高度不起作用答案

【问题标题】：Setting div max height doesn't work设置 div 最大高度不起作用
【发布时间】：2017-10-18 19:08:31
【问题描述】：

我有这个简单的 HTML

<html>
<head>
    <style>
    </style>
</head>
<body>
<div style="position: relative; overflow: visible; width: 100%; height: 100%;" class="surface">
    <div style="width: 300px; max-height: 2px; height: 2px; position: absolute; left: 36.165px; top: 0.8957px; border: 1px solid red;"></div>
    <div style="width: 1px; height: 200px; position: absolute; left: 30.165px; top: 47.8957px; border: 1px solid red;"></div>   
</div>
</body>
</html>

divs 基本上有两个：一个“水平”（高度 2px）和一个“垂直”（高度 2px）。

当我在 Firefox 上查看页面时：

在 IE (8) 上发生了一些奇怪的事情：

顶部的 DIV 不是 2px 高。

知道为什么会这样吗？

【问题讨论】：

这是一个快速的jsFiddle。 IE9 没问题。
@bažmegakapa 我尝试自己设置一个 jsfiddle，即使在 IE 8 中也很好，这就是我必须制作打印屏幕的原因。您能否尝试将我的代码放在 .html 中，看看您的 IE 中是否也有这种奇怪的行为？（不使用 jsfiddle）。
IE7也是这样...也许你只需要添加display: block
@JFK 你能把它放在一个 HTML 文件中看看你有没有问题？
好吧，添加一个DOCTYPE 否则怪癖模式会产生意想不到的格式和结果

标签： html css

【解决方案1】：

您可能的解决方案：

1)。将display: block 添加到您的风格中

2)。检查你有一个正确的DOCTYPE 否则（IE）怪癖模式会产生意想不到的格式和结果。 Check this article for reference

【讨论】：

【解决方案2】：

您的问题似乎源于 ie 的quirks mode 模式。

当没有 doctype 声明时发生。最大高度，除其他外（包括盒子模型）就像 ie5 一样。一个简单的解决方案是添加一个 doctype 声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

【讨论】：

【解决方案3】：

IE7、8 和 9 在这里可以正常工作。

您实际上并不需要max-height，但设置display: block 和/或line-height: 2px 可能是一个解决方案。

【讨论】：

是的，但它没有解释为什么我能够在 jsfiddle 中看到它，但在我的纯 HTML 中看不到，@Tyzoid 解决方案适用于我的所有代码

【解决方案4】：

我怀疑这将是 IE 在 quirks 模式下添加一些“有用”的设置，将容器的高度推到最小文本高度。尝试为 IE8 及更低版本设置 line-height: 2px;（可能是条件 cmets？），这样应该可以对其进行排序。

【讨论】：

是的，但它没有解释为什么我能够在 jsfiddle 中看到它，但在我的纯 HTML 中看不到，@Tyzoid 解决方案适用于我的所有代码

【解决方案5】：

就我而言，有一个

最小高度

设置覆盖其他设置

【讨论】：