0

我希望粉红色和蓝色框具有相同的高度（400px），这仅在 Opera 中不起作用。高度被底部填充所拖累，这对我来说看起来像是一个错误。你能帮忙吗？

更新 1 - 刚刚在 IE8 中检查过，但它也不起作用，所以问题是重新调整到 IE + Opera 的范围。

更新 2 - padding-bottom 更改为 50px 以使问题更清晰。我使用的 Opera 版本是 11.62。

Html（观看粉色和蓝色框高度）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td valign="top">
                <div style="display: table; width: 400px; height: 100px; background-color: wheat;">
                    <div style="display: table-cell; background-color: Green; padding-bottom: 50px; height: 100%;">
                        <div style="height: 100%; background-color: pink;">Inner</div>
                    </div>
                </div>
            </td>
            <td valign="top">
                <div style="display: table; width: 400px; height: 100px; background-color: blue;">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
4

1 回答 1

0

通过申请修复它box-sizing: border-box。

这是课程：

.bb
{
     box-sizing: border-box;
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */
}
于 2012-08-13T13:02:25.763 回答