Question

我有一个包含样式显示表的div：table。表包含高度为div的div：500px http://jsfiddle.net/9ucm7z9h/：

＆＃13;

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

＆＃13;

此代码在IE和Chrome / Firefox中的呈现方式不同。这是Chrome / Firefox的错误？我可以做些什么来强制它在IE中呈现？

Answer 1

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

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

尝试使用display:inline-block或table触发布局，这样可以修复显示为{{1}}的父级的错误行为，至少在Firefox中是这样。

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

您可以找到错误报告here。

Div带样式显示：表格高度错误

1 个答案: