CSS IE8 溢出：具有最大高度的自动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 overflow:auto with max-height
提问by Rytis
I have an element which may contain very big amounts of data, but I don't want it to ruin the page layout, so I set max-height: 100pxand overflow:auto, hoping for scrollbars to appear when the content does not fit.
我有一个可能包含大量数据的元素，但我不希望它破坏页面布局，所以我设置了max-height: 100px和overflow:auto，希望在内容不适合时出现滚动条。
It all works fine in Firefox and IE7, but IE8 behaves as if overflow:hiddenwas present instead of overflow:auto.
在 Firefox 和 IE7 中一切正常，但 IE8 的行为就像overflow:hidden存在而不是overflow:auto.
I tried overflow:scroll, still does not help, IE8 simply truncates the content without showing scrollbars. Changing max-heightdeclaration to heightmakes overflow work OK, it's the combination of max-heightand overflow:autothat breaks things.
我试过了overflow:scroll，仍然没有帮助，IE8 只是截断了内容而不显示滚动条。更改max-height声明height品牌溢出工作OK，这是组合max-height和overflow:auto打破的东西。
This is also logged as an official bug in the final, release version of IE8
这也被记录为IE8 最终发布版本中的官方错误
Is there a workaround? For now I resorted to using heightinstead of max-height, but it leaves plenty of empty space in case there isn't much data.
有解决方法吗？现在我使用height而不是max-height，但它会留下足够的空白空间，以防没有太多数据。
回答by Jeff Atwood
This is a really nasty bug as it affects us heavily on Stack Overflow with <pre>code blocks, which have max-height:600and width:auto.
这是一个非常讨厌的错误，因为它严重影响了我们在 Stack Overflow 上的<pre>代码块，其中包含max-height:600和width:auto.
It is logged as a bug in the final version of IE8 with no fix.
它在 IE8 的最终版本中被记录为一个错误，没有修复。
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
There is a really, really hacky CSS workaround:
有一个非常非常hacky的CSS解决方法：
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode
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
}
and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.
当然还有其他人提到的条件 CSS，但我不喜欢那样，因为这意味着您在每个页面请求中都提供了额外的 HTML 内容。
回答by Egglabs
{
overflow:auto
}
Try div overflow:auto
尝试 div 溢出：自动
回答by James Koch
I saw this logged as a fixed bug in RC1. But I've found a variation that seems to cause a hard assert render failure. Involves these two styles in a nested table.
我看到这被记录为 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>
回答by ashipj
{max-height:200px, Overflow:auto}
Thanks to Srinivas Tamada, The above code did work for me.
感谢 Srinivas Tamada，上面的代码对我有用。
回答by enigment
Similar situation, a pre element with maxHeight set by js to fit in allotted space, width 100%, overflow auto. If the content is shorter than maxHeight and also fits horizontally, we're good. If you resize the window so the content no longer fits horizontally, a horizontal scrollbar appears, but the height of element immediately jumps to the full maxHeight, regardless of the height of the content.
类似的情况，一个由 js 设置的 maxHeight 的 pre 元素适合分配的空间，宽度为 100%，自动溢出。如果内容短于 maxHeight 并且也适合水平，我们很好。如果您调整窗口大小使内容不再适合水平放置，则会出现一个水平滚动条，但无论内容的高度如何，元素的高度都会立即跳转到完整的 maxHeight。
Tried various forms of the css hack mentioned by Jeff, but didn't find anything like it that wasn't a js bad-parameter error.
尝试了 Jeff 提到的各种形式的 css hack，但没有找到任何类似的不是 js 错误参数错误的东西。
Best I could find was to pick your poison for ie8: Either drop the maxHeight limit, so the element can be any height (best for my case), or set height rather than maxHeight, so it's always that tall even if the content itself is much shorter. Very not ideal. Wacked behavior is gone in ie9.
我能找到的最好的方法是为 ie8 选择你的毒药：要么降低 maxHeight 限制，这样元素可以是任何高度（最适合我的情况），要么设置高度而不是 maxHeight，所以即使内容本身是那么高矮得多。非常不理想。怪异的行为在 ie9 中消失了。
回答by Abdul Rauf
Set max-height only and don't set the overflow. This way it will show scroll bar if content is more than max-height and shrinks if content is less than the max-height.
仅设置 max-height，不要设置溢出。这样它会在内容大于 max-height 时显示滚动条，如果内容小于 max-height 则缩小。
回答by ANeves
To reproduce:
重现：
(This crashes the whole page.)
（这会导致整个页面崩溃。）
<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>
(Whereas this works fine...)
（虽然这工作正常......）
<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>
(And, madly, so does this. [No content in the div at all.])
（而且，疯狂地，也是如此。[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>
回答by Vadim Svv
I found this : https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
我发现了这个：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 */ }
此方法已在 IE6 中得到验证，应该也适用于 IE5。只需更改值以满足您的需要（代码注释有注释）。在此示例中，我们将 IE 和所有符合标准的浏览器的 max-height 设置为 333px 1：
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
and this works for me perfectly so I decided to share this.
这对我来说非常有效，所以我决定分享这个。
