IE8溢出：自动与最大高度
我有一个元素可能包含非常大量的数据，但我不希望它破坏页面布局，所以我设置了max-height: 100px和overflow:auto ，希望滚动条出现时，内容不适合。
它在Firefox和IE7中都可以正常工作，但是IE8的行为就像overflow:hidden是存在的，而不是overflow:auto 。
我试过overflow:scroll ，仍然没有帮助，IE8只是截断内容而不显示滚动条。 将max-height声明更改为height使溢出工作正常，它是max-height和overflow:auto的组合overflow:auto打破事情。
这也被logging在IE8的最终发布版本中
有没有解决方法？ 现在我使用height而不是max-height ，但是如果没有太多的数据，就会留下大量的空白空间。
这是一个非常糟糕的错误，因为它会使用<pre>代码块对Stack Overflow产生严重影响，代码块的max-height:600 ， width:auto 。
它被logging为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\9 }
当然也有条件的CSS，但是我不喜欢这个，因为这意味着你在每个页面请求中都会提供额外的HTML cruft。
{ overflow:auto }
尝试div溢出：自动
我看到这被logging为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％，溢出auto。 如果内容比maxHeight短，并且水平放置，那我们就很好。 如果调整窗口大小以使内容不再水平放置，将出现一个水平滚动条，但元素的高度会立即跳转到完整的maxHeight，而不pipe内容的高度如何。
尝试了各种forms的杰夫提到的CSS的黑客，但没有发现这样的事情，这不是一个JS错误的参数错误。
我能find的最好的select是为ie8select毒素：或者降低maxHeight限制，因此元素可以是任意高度（最适合我的情况），或者设置高度而不是maxHeight，所以即使内容本身是高的矮得多。 非常不理想。 有缺陷的行为已经消失了。
只设置最大高度，不要设置溢出。 这样，如果内容大于最大高度，将显示滚动条，如果内容小于最大高度，则显示缩小。
重现：
（这使整个页面崩溃。）
<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中validation过了，也应该在IE5下工作。 只需更改值以满足您的需求（代码注释说明）。 在这个例子中，我们将IE和所有符合标准的浏览器的最大高度设置为333px 1：
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
这完全适合我，所以我决定分享这个。
