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 に答える