IE8 溢出：自动最大高度
https://stackoverflow.com/questions/7707
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有一个元素可能包含大量数据，但我不希望它破坏页面布局，所以我设置 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, ，但它会留下大量空白空间，以防数据不多。
解决方案
这是一个非常令人讨厌的错误，因为它对我们在 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，上面的代码对我有用。
类似的情况，由 js 设置 maxHeight 的 pre 元素以适合分配的空间，宽度 100%，自动溢出。如果内容比 maxHeight 短并且水平适合，那就很好。如果调整窗口大小，使内容不再水平放置，则会出现水平滚动条，但元素的高度会立即跳转到完整的 maxHeight，无论内容的高度如何。
尝试了 Jeff 提到的各种形式的 css hack，但没有发现任何类似的不是 js 错误参数错误的东西。
我能找到的最好的办法就是为 ie8 选择你的毒药：要么放弃 maxHeight 限制，这样元素可以是任何高度（最适合我的情况），要么设置高度而不是 maxHeight，这样即使内容本身短得多，它也总是那么高。非常不理想。Wacked 行为在 ie9 中消失了。
只设置max-height，不设置overflow。这样，如果内容大于最大高度，它将显示滚动条；如果内容小于最大高度，它将缩小。
重现：
（这会使整个页面崩溃。）
<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>
我找到了这个 ：https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
该方法已在IE6中得到验证，在IE5中应该也能工作。只需更改值即可满足您的需求（带有解释性注释的代码）。在此示例中，我们将 IE 和所有符合标准的浏览器的 max-height 设置为 333px 1：
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
这对我来说非常有效，所以我决定分享这个。
