警告
廃止され、サポート対象外となった Internet Explorer 11 デスクトップ アプリケーションは、特定のバージョンの Windows 10 で Microsoft Edge の更新プログラムを通じて完全に無効になります。 詳細については、「Internet Explorer 11 デスクトップ アプリの廃止に関する FAQ」をご覧ください。
この記事では、Internet Explorer のテーブル セル内の <div> タグに相対的な高さを使用すると、テーブルのサイズが変更される設計上の動作について説明します。
元の製品バージョン: Internet Explorer
元の KB 番号: 2778473
まとめ
テーブル セル内の <div> タグに相対的な高さを使用している場合は、Internet Explorer の標準モードと風変わりなモードで異なるレイアウト動作が発生する可能性があります。 例えば次が挙げられます。
<!DOCTYPE HTML>
<html>
<body>
<div style='height: 75px'>
<table style='height:100%'>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td style='height:100%'>
<div style='height:100%'>Row 2</div>
</td>
</tr>
</table>
</div>
</body>
</html>
開発者ツールを使用してドキュメント モードを切り替えると、レイアウトを確認するときに異なる動作が表示されます。
上記の例では、風変わりなモードでは、テーブルは周囲の <div> 要素の高さ (75 ピクセル) を取得します。 2 番目の行は残りの高さをすべて受け取り、テーブル自体のサイズは変更されません。
標準モードでは、テーブル行 2 (行 2) の内部 <div> タグが、計算された高さを、絶対高さ (75 ピクセル) の最初の親から取得するため、テーブルのサイズが変更されます。 これにより、両方の行が最初に指定された高さに収まらないため、テーブル全体のサイズが変更されます。
詳細
この動作は仕様であり、2006 年に Internet Explorer 7 で導入されました。 Microsoft 以外の Web ブラウザーでも、さまざまな動作が表示される場合があります。 現在、CSS とテーブルだけを使用してこの動作を変更する方法はありません。 この動作は、標準モードでのテーブル モデルの制限と見なされます。 CSS テーブル モデルでは、実際には、このシナリオが想定どおりに動作することを防ぎます。
互換性上の理由から、これをサポートするのは、クイックモードとクイックモード エミュレーション (QME) のみです。