关于Internet Explorer 8：IE8溢出：最大高度自动

IE8 overflow:auto with max-height

我有一个可能包含大量数据的元素，但是我不想让它破坏页面布局，所以我设置了max-height: 100px和overflow:auto，希望在内容不合适时显示滚动条。

一切在Firefox和IE7中都可以正常工作，但是IE8的行为就像是overflow:hidden而不是overflow:auto。

我尝试了overflow:scroll，但仍无济于事，IE8只是将内容截断而不显示滚动条。将max-height声明更改为height可使溢出正常运行，这是max-height和overflow:auto的组合造成的。

在IE8的最终发行版本中，这也被记录为正式错误。

有解决方法吗？现在，我求助于使用height而不是max-height，但是在没有太多数据的情况下，它会留出大量的空白空间。

这是一个非常令人讨厌的错误，因为它会严重影响具有和width:auto的代码块的堆栈溢出。

在没有修复的IE8最终版本中，它被记录为错误。

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

有一个非常非常黑的CSS解决方法：

http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

1
2
3
4
5
6
7

/*
SUPER nasty IE8 hack to deal with this bug
*/
pre
{
max-height: none\\9
}

当然还有其他人提到的条件CSS，但是我不喜欢它，因为这意味着您在每个页面请求中都要处理额外的HTML问题。

1
2
3

{
overflow:auto
}

尝试div溢出：自动

我看到此记录为RC1中的固定错误。但是我发现一个变种似乎会导致硬断言渲染失败。将这两种样式包含在嵌套表中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
Test
<style type="text/css">
.calendarBody
{
overflow: scroll;
max-height: 500px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
This is a cell in the outer table.

<table>
<tbody>
<tr>
<td>
This is a cell in the inner table.
</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</body>
</html>

1	{max-height:200px, Overflow:auto}

感谢Srinivas Tamada，上面的代码对我有用。

仅设置最大高度，不要设置溢出。这样，如果内容大于最大高度，它将显示滚动条；如果内容小于最大高度，则将缩小。

类似的情况是，由js设置maxHeight的pre元素适合分配的空间，宽度100％，自动溢出。如果内容短于maxHeight并且水平放置，则很好。如果您调整窗口大小以使内容不再水平放置，则会出现水平滚动条，但是元素的高度会立即跳到完整的maxHeight，而与内容的高度无关。

尝试了Jeff提到的各种形式的css hack，但是没有找到不是js错误参数错误的类似信息。

我能找到的最好办法是为ie8选择毒药：要么降低maxHeight限制，所以元素可以是任何高度(对我而言是最佳)，也可以设置高度而不是maxHeight，因此即使内容本身是矮得多。非常不理想。糟糕的行为在ie9中消失了。

复制：

(这会使整个页面崩溃。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

(尽管效果很好...)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
look:

<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
The quick brown fox
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

(而且，疯狂的是。[div中根本没有内容。])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

我找到了这个：
https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:

* html div#division {
height: expression( this.scrollHeight > 332 ?"333px" :"auto" ); /* sets max-height for IE */
}

这对我来说非常有效，所以我决定分享一下。