Fatal编程技术网

Internet explorer 8 IE8溢出：具有最大高度的自动

internet-explorer-8 css

Internet explorer 8 IE8溢出：具有最大高度的自动,internet-explorer-8,overflow,css,Internet Explorer 8,Overflow,Css,我有一个元素可能包含非常大的数据量，但我不希望它破坏页面布局，因此我设置了max height:100px和overflow:auto，希望在内容不合适时出现滚动条 它在Firefox和IE7中都可以正常工作，但IE8的行为就像出现了overflow:hidden而不是overflow:auto 我尝试了溢出：scroll，但仍然没有帮助，IE8只是简单地截断内容而不显示滚动条。将max height声明更改为height可以使溢出正常工作，是max height和overflow:auto的组

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

它在Firefox和IE7中都可以正常工作，但IE8的行为就像出现了
overflow:hidden
而不是
overflow:auto

我尝试了
溢出：scroll
，但仍然没有帮助，IE8只是简单地截断内容而不显示滚动条。将
max height
声明更改为
height
可以使溢出正常工作，是
max height
和
overflow:auto
的组合破坏了一切

这也被记录为

有解决办法吗？目前，我使用了
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>


试验
.日历正文
{
溢出：滚动；
最大高度：500px；
}
这是外表中的一个单元格。
这是内表中的一个单元格。
这是一个非常讨厌的bug，因为它严重影响了


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


当然还有其他人提到的条件CSS，但我不喜欢，因为这意味着在每个页面请求中都会提供额外的HTML cruft。
要复制：
（这会使整个页面崩溃。）



看：
X


（鉴于此方法效果良好……）



看：
敏捷的棕色狐狸


（疯狂地，这也是如此。[div中根本没有内容。]]



看：


尝试div溢出：自动


多亏了Srinivas Tamada，上面的代码对我起到了作用。
类似的情况，一个由js设置的具有maxHeight的pre元素，可以容纳分配的空间，宽度100%，自动溢出。如果内容比maxHeight短并且水平适合，我们就可以了。如果调整窗口大小，使内容不再适合水平方向，则会显示一个水平滚动条，但无论内容的高度如何，元素的高度都会立即跳到最大全高

尝试了Jeff提到的各种形式的css攻击，但并没有发现任何类似的js坏参数错误


我能找到的最好办法就是为ie8选择你的毒药：要么降低maxHeight限制，使元素可以是任何高度（最适合我的情况），要么设置高度而不是maxHeight，这样即使内容本身要短得多，它也总是那么高。很不理想。Wacked行为在ie9中消失。
仅设置最大高度，不设置溢出。这样，如果内容大于最大高度，它将显示滚动条，如果内容小于最大高度，它将收缩。
我发现：


该方法已在IE6中得到验证，也应在IE5中起作用。只需更改值以满足您的需要（用注释注释注释代码）。在本例中，我们将IE和所有符合标准的浏览器的最大高度设置为333px 1：


*html分区{
高度：表达式（this.scrollHeight>332？/333px）：“自动”）；/*设置IE的最大高度*/
}


这对我来说非常有效，所以我决定分享这个
 我在Microsoft链接上得到了一个404。感谢您提供的详细信息：my.opera（链接）现在已关闭…我想没有人知道Microsoft链接可能被移动到了哪里？注意：这在IE9中似乎已修复（至少在RC中），只是给后来发现此链接的ppl的一个说明，我看到在IE8中设置一个div的max height和overflow会使整个页面崩溃，就像页面保持完全空白一样，但是页面标题会显示出来。有趣…是的，设置最大高度和溢出导致页面无法呈现（完全为空）。我换成了overflow-y，因为它满足了我的需要。

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



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



{
overflow:auto
}



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