Question

我希望粉色和蓝色的盒子具有相同的高度（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>

Answer 1

通过应用box-sizing: border-box来解决问题。

这是班级：

.bb
{
     box-sizing: border-box;
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */
}

Opera和IE8 100％高度底部填充BUG

1 个答案: