IE8溢出：自动设置最大高度
我有一个可能包含大量数据的元素，但我不想让它破坏页面布局，所以我设置了" 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，但是如果没有太多数据的话，它会留下很多空白。
解决方案
回答
我看到此记录为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>
回答
这是一个非常令人讨厌的错误，因为它会严重影响堆栈中带有<pre>代码块的堆栈溢出，这些代码块具有max-height：600和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
/*
SUPER nasty IE8 hack to deal with this bug
*/
pre
{
max-height: none
}
当然还有其他人提到的条件CSS，但是我不喜欢它，因为这意味着我们在每个页面请求中都要处理额外的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;">
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>
