重现：

Question

我有一个可能包含大量数据的元素，但我不希望它破坏页面布局，所以我设置max-height: 100px和overflow:auto，希望滚动条出现时内容不适合。

在Firefox和IE7中一切正常，但IE8表现得好像overflow:hidden而不是overflow:auto。

我试过overflow:scroll，仍然没有帮助，IE8只是截断内容而不显示滚动条。将max-height声明更改为height会使溢出工作正常，这是max-height和overflow:auto的组合，可以解决问题。

这也记录为official bug in the final, release version of IE8

有解决方法吗？现在我使用height代替max-height，但是如果没有太多数据，它会留下足够的空白空间。

Answer 1

这是一个非常讨厌的错误，因为它会严重影响我们使用<pre>代码块的Stack Overflow，其代码块为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副本。

Answer 2

{
overflow:auto
}

尝试div overflow：auto

Answer 3

我在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>

Answer 4

{max-height:200px, Overflow:auto}

感谢Srinivas Tamada，上面的代码对我有用。

Answer 5

重现：

（这会导致整个页面崩溃。）

<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>

Answer 6

类似情况，一个pre元素，其中maxHeight由js设置以适合分配的空间，宽度为100％，溢出自动。如果内容比maxHeight短，并且也适合水平，我们很好。如果您调整窗口大小以使内容不再水平放置，则会出现水平滚动条，但无论内容的高度如何，元素的高度都会立即跳转到完整的maxHeight。

尝试了Jeff提到的各种形式的css hack，但没有发现任何类似于js错误参数的错误。

我能找到的最好的是为ie8选择你的毒药：要么降低maxHeight限制，所以元素可以是任何高度（最适合我的情况），或者设置高度而不是maxHeight，所以它总是很高，即使内容本身要短得多。非常不理想。 W9的行为在ie9中消失了。

Answer 7

仅设置max-height，不设置溢出。这样，如果内容超过最大高度，它将显示滚动条，如果内容小于最大高度，则显示缩小。

Answer 8

我发现了这个： 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 */ }

这对我很有用，所以我决定分享这个。

IE8溢出：自动带最大高度

8 个答案:

重现：