HTML5显示表格嵌套的div在Firefox和Opera中无法正常工作

Question

HTML5显示表格嵌套的div在Firefox和Opera中无法正常工作

4

以下是测试代码。

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;">
    <div style="display:table-row;background:red;">A</div>
    <div style="display:table-row;background:green;">
        <div style="display:block;background:yellow;width:100%;height:100%;">B</div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">C</div>
</div>
</body>
</html>

Firefox和Opera显示黄色div很小（类似于table-row但设置了display:block）。 Chrome则会在绿色div（table-row）的100％高度上显示黄色div。

我希望在Firefox，Opera和IE> 8中像在Chrome中一样正常工作！

更新：

我发现了以下问题：

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;">
    <div style="height:50px;display:table-row;background:red;">A</div>
    <div style="display:table-row;background:green;">
        <div style="display:table-cell;background:yellow;">
            <div style="display:block;width:100%;height:100%;background:darkred;">B</div>
        </div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">C</div>
</div>
</body>
</html>

在Opera中无法正常显示深红色的div！

- featureoffuture

2个回答

0

如果您的目标是使所有行具有相等的高度，则最好使用适当的表格：

<table style="width:100%;height:100%;">
  <tr style="background:red;">
    <td>A</td></tr>
  <tr style="background:green;">
    <td style="background:yellow;">B</td>
  </tr>
  <tr style="background:blue;">
    <td>C</td>
  </tr>
</table>

这是一个代码片段：http://jsfiddle.net/B5jUh/9/

- darwin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Plocher · Accepted Answer

这似乎可以使所有内容在IE、Firefox和Chrome中呈现一致：

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-width:100%;min-height:100%;">
    <div style="display:table-row;background:red;">
        <div style="display:table-cell">A</div>
    </div>
    <div style="display:table-row;background:green;">
        <div style="display:table-cell;background:yellow;width:100%;height:100%;">B</div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">
        <div style="display:table-cell">C</div>
    </div>
</div>
</body>
</html>

唯一的区别是我在每个table-row中添加了display:table-cell divs。它将具有一个高为50px的“C”行，一个最小的“A”行和其余填充着黄色的“B”行。

看起来你可以简单地通过将内部的“B” div从display:block更改为display:table-cell来完成，但我认为最好的做法是始终在table-row中有一个table-cell（我可能错了？）。

我的修改在所有3个浏览器中的截图：

编辑：

如果你想让你的行具有相同的高度，你可以使用这个标记：

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-width:100%;min-height:100%;">
    <div style="display:table-row;background:red;height:33%">
        <div style="display:table-cell">A</div>
    </div>
    <div style="display:table-row;background:green;height:33%">
        <div style="display:table-cell;background:yellow;">B</div>
    </div>
    <div style="display:table-row;background:blue;height:33%;">
        <div style="display:table-cell">C</div>
    </div>
</div>
</body>
</html>

enter image description here