10

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

知道为什么会这样吗？

4

5 回答 5

5

您可能的解决方案：

1）。添加display: block到您的风格

2）。检查你有一个适当的DOCTYPE否则（IE）怪癖模式会产生意想不到的格式和结果。检查这篇文章以供参考

于 2012-11-12T00:04:07.807 回答
4

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
于 2012-11-11T23:58:37.813 回答
3

IE7, 8 and 9 works fine here.

You dont really need the max-height, but setting a display: block and/or line-height: 2px instead could be a solution.

于 2012-11-11T23:55:58.600 回答
2

I suspect this will be IE addding some "helpful" settings in quirks mode that pushes the height of a container to the minimum text height. Try setting line-height: 2px; for IE8 and lower (conditional comments, perhaps?) and that should sort it.

于 2012-11-11T23:54:45.543 回答
0

就我而言，有一个

最小高度

设置覆盖其他设置

于 2017-10-18T11:08:31.260 回答