Win/IEで絶対配置（position: absolute）のボックスが消えるバグの検証ページ

http://jmblog.jp/archives/180より。
Bruno Fassino氏のIE/Win: Disappearing position:absolute boxes near to floats and clears のテストを元にしています。

日本語 | English

概要

Win/IEでは、以下の場合に絶対配置（position: absolute）にしたボックスがレンダリングされないことがある。

Container
{ position: relative; }
AP Box
{ position: absolute; }
float
{ float: left; width: 50%; }
float w100
{ float: left; width: 100%; }
float w100 negm
{ float: left; width: 100%; margin-right: -2px; }
clear (not present)
{ clear: both; }
clear hasLayout
{ clear: both; height: 8px; }

テストケース

next »

Test 0

HTML内の記述順

  1. AP Box only
<div class="relative">
  <div class="ap_box"></div>
</div>

テスト結果

« back | next »

Test 1

HTML内の記述順

  1. AP Box
  2. float
  3. clear + hasLayout
<div class="relative">
  <div class="ap_box"></div>
  <div class="float"></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

« back | next »

Test 1b - Test 1 の解決方法 #1

hasLayoutプロパティを持たない clear を使う

HTML内の記述順

  1. AP Box
  2. float
  3. clear
<div class="relative">
  <div class="ap_box"></div>
  <div class="float"></div>
  <div class="clear"></div>
</div>

テスト結果

« back | next »

Test 1c - Test 1 の解決方法 #2

AP Box と float の間にボックスを挿入する。

HTML内の記述順

  1. AP Box
  2. extra box
  3. float
  4. clear hasLayout
<div class="relative">
  <div class="ap_box"></div>
  <div class="extra">extra box</div>
  <div class="float"></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

extra box

補足

ボックスの中身は空でも問題なし。(<div class="extra"></div>)

« back | next »

Test 1d - Test 1 の解決方法 #3

AP Box をボックスで囲む。

HTML内の記述順

  1. <extra box>AP Box</extra box>
  2. float
  3. clear hasLayout
<div class="relative">
  <div class="extra"><div class="ap_box"></div></div>
  <div class="float"></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

« back | next »

Test 1e - Test 1 の解決方法 #4

float をボックスで囲む。

HTML内の記述順

  1. AP Box
  2. <extra box>float</extra box>
  3. clear + hasLayout
<div class="relative">
  <div class="ap_box"></div>
  <div class="extra"><div class="float"></div></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

« back | next »

Test 1f - Test 1 の解決方法 #5

AP Box と float のあとにボックスを挿入する。

HTML内の記述順

  1. AP Box
  2. float
  3. extra box
  4. clear hasLayout
<div class="relative">
  <div class="ap_box"></div>
  <div class="float"></div>
  <div class="extra">extra box</div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

extra box

« back | next »

Test 1g

AP Box と float の前にボックスを挿入してもダメ。

HTML内の記述順

  1. extra box
  2. AP Box
  3. float
  4. clear hasLayout
<div class="relative">
  <div class="extra">extra box</div>
  <div class="ap_box"></div>
  <div class="float"></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

extra box

« back | next »

Test 2

HTML内の記述順

  1. float
  2. AP Box
  3. clear + hasLayout
<div class="relative">
  <div class="float"></div>
  <div class="ap_box"></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

« back | next »

Test 2b - Test 2 の解決方法 #1

hasLayoutプロパティを持たない clear を使う

HTML内の記述順

  1. float
  2. AP Box
  3. clear
<div class="relative">
  <div class="float"></div>
  <div class="ap_box"></div>
  <div class="clear"></div>
</div>

テスト結果

« back | next »

Test 2c - Test 2 の解決方法 #2

float と AP Box の間にボックスを挿入する。

HTML内の記述順

  1. float
  2. extra box
  3. AP Box
  4. clear + hasLayout
<div class="relative">
  <div class="float"></div>
  <div class="extra">extra box</div>
  <div class="ap_box"></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

extra box

補足

ボックスの中身は空でも問題なし。(<div class="extra"></div>)

« back | next »

Test 2d - Test 2 の解決方法 #3

AP Box をボックスで囲む。

HTML内の記述順

  1. float
  2. <extra box>AP Box</extra box>
  3. clear hasLayout
<div class="relative">
  <div class="float"></div>
  <div class="extra"><div class="ap_box"></div></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

« back | next »

Test 2e - Test 2 の解決方法 #4

float をボックスで囲む。

HTML内の記述順

  1. <extra box>float</extra box>
  2. AP Box
  3. clear + hasLayout
<div class="relative">
  <div class="extra"><div class="float"></div></div>
  <div class="ap_box"></div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

« back | next »

Test 2f - Test 2 の解決方法 #4

float と AP Box のあとにボックスを挿入する。

HTML内の記述順

  1. float
  2. AP Box
  3. extra box
  4. clear + hasLayout
<div class="relative">
  <div class="extra"><div class="float"></div></div>
  <div class="ap_box"></div>
  <div class="extra">extra box</div>
  <div class="clear hasLayout"></div>
</div>

テスト結果

« back | next »

Test 3

HTML内の記述順

  1. float
  2. clear + hasLayout
  3. AP Box
<div class="relative">
  <div class="float"></div>
  <div class="clear hasLayout"></div>
  <div class="ap_box"></div>
</div>

テスト結果

« back | next »

Test 4

HTML内の記述順

  1. AP Box
  2. float (float's width < container's width)
<div class="relative">
  <div class="ap_box"></div>
  <div class="float"></div>
</div>

テスト結果

« back | next »

Test 4a

HTML内の記述順

  1. AP Box
  2. float + width:100%
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100"></div>
</div>

テスト結果

« back | next »

Test 4b - Test 4a の解決方法 #1

-2px 以下のネガティブマージンを float に与える。

HTML内の記述順

  1. AP Box
  2. float + width:100% + margin-right:-2px
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100 negm"></div>
</div>

テスト結果

補足

-1px だとダメ（Test 4d）。ただし、float に display:inline を指定している場合は -2px でもダメで -3px 以下にする必要がある（Test 4e）。

« back | next »

Test 4c - Test 4a の解決方法 #2

float と AP Box の間にボックスを挿入する。

HTML内の記述順

  1. AP Box
  2. extra box
  3. float + width:100%
<div class="relative">
  <div class="ap_box"></div>
  <div class="extra">extra box</div>
  <div class="float w100"></div>
</div>

テスト結果

extra box

補足

ボックスの中身は空でも問題はない。(<div class="extra"></div>). また、Test 1d や Test 1e のように、AP Box や float を ボックスで囲むのもよい。

« back | next »

Test 4d (additional test for Test 4b)

-1px のネガティブマージンだとうまくいかない。

HTML内の記述順

  1. AP Box
  2. float + width:100% + margin-right:-1px
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100" style="margin-right: -1px;"></div>
</div>

テスト結果

« back | next »

Test 4e (additional test for Test 4b)

float に display:inline を指定している場合は、ネガティブマージンは -2px でも不十分で -3px 以下にしなければならない。

HTML内の記述順

  1. AP Box
  2. float + width:100% + margin-right:-2px + display:inline
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100" style="margin-right:-2px; display:inline;"></div>
</div>

テスト結果

« back | next »

Test 4f (additional test for Test 4b)

通常のマージンだとダメ。

HTML内の記述順

  1. AP Box
  2. float + width:100% + margin-right:1px
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100" style="margin-right: 1px;"></div>
</div>

テスト結果

« back | next »

Test 5

HTML内の記述順

  1. float
  2. AP Box
<div class="relative">
  <div class="float"></div>
  <div class="ap_box"></div>
</div>

テスト結果

« back | next »

Test 5a

HTML内の記述順

  1. float + width:100%
  2. AP Box
<div class="relative">
  <div class="float w100"></div>
  <div class="ap_box"></div>
</div>

テスト結果

« back | next »

Test 5b - Test 5a の解決方法 #1

Test 4b と同じ。

HTML内の記述順

  1. float + width:100% + margin-right:-2px
  2. AP Box
<div class="relative">
  <div class="float w100 negm"></div>
  <div class="ap_box"></div>
</div>

テスト結果

« back | next »

Test 5c - Test 5a の解決方法 #2

Test 4c と同じ。

HTML内の記述順

  1. float + width:100%
  2. extra box
  3. AP Box
<div class="relative">
  <div class="float w100"></div>
  <div class="extra">extra box</div>
  <div class="ap_box"></div>
</div>

テスト結果

extra box