带有样式显示的 Div:表格的高度错误

Question

我有一个div，它用样式显示包装一个表格：表格。表格包含高度：500px 的div http://jsfiddle.net/9ucm7z9h/：

<div style="width: 400px; display: table; background-color: blue;">
    <div style="height: 100px; background-color: green; overflow: scroll">
        <table style="width: 100%;">
            <tr>
                <td>
                    <div id="test" style="height: 500px; background-color: yellow;">&nbsp;</div>
                </td>
            </tr>
        </table>
    </div>
</div>

这段代码在IE和Chrome/Firefox中呈现的方式不同。这是一个Chrome/Firefox错误？我该怎么做才能强制它渲染为在IE中？

Answer 1

这似乎是一个错误，可以通过以某种方式触发布局来根除。

首先，默认情况下，一个规则为display:table的子元素可能会变成display:table-row或display:table-cell，即使不是通过 CSS 规则编写的。浏览器总是试图纠正或修复这里显然无法正常工作的内容。

尝试使用float或display:inline-block触发布局看起来可以修复显示为table的父级的不当行为，至少在 Firefox 中是这样。

http://jsfiddle.net/9ucm7z9h/3/

您可以在此处找到错误报告。