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 では黄色の div が小さく表示されます (テーブル行として表示されますが、display:block が設定されています)。オペラも。Chrome は、緑色の div (テーブル行) の 100% の高さで黄色の div を表示します。

Chrome と同じように、これが Firefox、Opera、IE>8 で動作する必要があります。

アップデート：

次の問題が見つかりました。

<!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 で darkred div が機能しない!

4

2 に答える 2

3

これにより、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>

唯一の違いはdisplay:table-cell、各テーブル行内に div を追加したことです。高さ 50 ピクセルの「C」行、最小限の「A」行、残りは黄色の「B」行で埋められます。

display:blockその内側の「B」divをからに変更するだけで簡単に逃げることができるように見えますがdisplay:table-cell、常にあなたの中に a を持つことがベストプラクティスだと思いtable-cellますtable-row(間違っている可能性がありますか?)。

変更を加えた 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>

ここに画像の説明を入力

于 2013-04-02T07:26:05.360 に答える