我有一个可能包含大量数据的元素，但我不希望它破坏页面布局，所以我设置max-height: 100pxand overflow:auto，希望在内容不适合时出现滚动条。
在 Firefox 和 IE7 中一切正常，但 IE8 表现得好像overflow:hidden存在而不是overflow:auto.
我试过overflow:scroll了，仍然没有帮助，IE8只是截断内容而不显示滚动条。max-height将声明更改为height使溢出工作正常，它是max-heightand的组合overflow:auto破坏了事情。
这也被记录为IE8 的最终发布版本中的官方错误
有解决方法吗？现在我求助于使用height而不是max-height，但如果没有太多数据，它会留下大量空白空间。
这是一个非常讨厌的错误，因为它严重影响了 Stack Overflow 上的<pre>代码块，其中包含max-height:600和width:auto.
它在 IE8 的最终版本中被记录为一个错误，没有修复。
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
有一个非常非常 hacky 的 CSS 解决方法：
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode
/*
SUPER nasty IE8 hack to deal with this bug
*/
pre
{
max-height: none\9
}
当然还有其他人提到的条件 CSS，但我不喜欢这样，因为这意味着您在每个页面请求中都提供了额外的 HTML 垃圾。
{
overflow:auto
}
尝试 div 溢出：自动
我看到这被记录为 RC1 中的一个固定错误。但是我发现了一个似乎会导致硬断言渲染失败的变体。在嵌套表中涉及这两种样式。
<!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>
<title>Test</title>
<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.
<div class="calendarBody">
<table>
<tbody>
<tr>
<td>
This is a cell in the inner table.
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
{max-height:200px, Overflow:auto}
感谢 Srinivas Tamada，上面的代码确实对我有用。
（这会使整个页面崩溃。）
<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;">
X
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
（虽然这很好用......）
<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 中根本没有内容。]）
<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;">
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
类似的情况，一个由 js 设置 maxHeight 的 pre 元素以适应分配的空间，宽度 100%，自动溢出。如果内容比 maxHeight 短并且也适合水平，我们很好。如果您调整窗口大小以使内容不再水平放置，则会出现一个水平滚动条，但元素的高度会立即跳到最大的 maxHeight，而不管内容的高度如何。
尝试了 Jeff 提到的各种形式的 css hack，但没有发现任何不是 js 错误参数错误的东西。
我能找到的最好的方法是为 ie8 选择你的毒药：要么降低 maxHeight 限制，所以元素可以是任何高度（最适合我的情况），或者设置高度而不是 maxHeight，所以即使内容本身也是如此，它总是那么高矮得多。很不理想。在 ie9 中，古怪的行为消失了。
只设置最大高度，不要设置溢出。这样，如果内容大于最大高度，它将显示滚动条，如果内容小于最大高度，它将缩小。
我发现了这个： https ://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
此方法已在 IE6 中得到验证，在 IE5 中也应该可以使用。只需更改值以满足您的需要（带有解释性注释的代码）。在此示例中，我们将 IE 和所有符合标准的浏览器的最大高度设置为 333px 1：
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
这对我来说非常有用，所以我决定分享这个。