Div 样式 display:table 的高度不正确

Question

我有一个 div，它用 table 包装了一个显示样式：table。 Table 包含 div 和 height:500px 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/

您可以找到错误报告 here。

Div 样式 display:table 的高度不正确

Div with style display:table has wrong height

html

javascript

css

firefox

google-chrome