Question

我有这个简单的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>

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

当我在firefox上查看页面时：

enter image description here

在IE（8）上发生了一些事情：

enter image description here

顶部DIV不是2px高。

知道为什么会这样吗？

Answer 1

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

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

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

Answer 2

IE7,8和9在这里工作正常。

您真的不需要max-height，但设置display: block和/或line-height: 2px可能是一种解决方案。

Answer 3

您可能的解决方案：

1）。将display: block添加到您的样式

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

Answer 4

我怀疑这将是IE在怪癖模式中添加一些“有用”设置，将容器的高度推到最小文本高度。尝试为IE8设置line-height: 2px;并降低（有条件的评论，可能？），这应该排序。

Answer 5

在我的情况下有一个

最小高度

设置覆盖其他设置

设置div max height不起作用

5 个答案: