IE6対応に関するサンプル

Internet Explorer 6

IE6対応(クロスブラウザ対応)というのはこんなに大変だったんだよ、というサンプルです。元記事はこちら
※数年後に読み返しても違和感のないように、すべて過去形でお送りします。:)

テスト環境については下記の通り。
IEは「Internet Explorer 6」、「Internet Explorer 7(IETester)」、「Adobe® BrowserLab」。
モダンブラウザは「Mac Firefox 9.0.1」、「Mac Safari 5.1.2」、「Mac Chrome 16.0.9」、「Opera 11.6」。(2012.1.11現在最新)

以下は目次です。クリックするとその項目へ移動します。

  1. floatしたブロック要素へmarginを指定すると、floatした方向へのmarginが2倍になった。

  2. width/heightの値はpadding/borderも含んだ値になった。

  3. table内で同じ事をやると複雑な結果になった。

  4. marginにマイナス値を指定するとボックスからはみ出した部分が見えなくなった。

  5. width/heightに小さい値を指定すると、指定どおりにならなかった。

  6. font-sizeをpx指定すると、ブラウザでのフォントサイズ変更ができなかった。

  7. ボーダーを透明にできなかった。

  8. overflow: visibleを指定しても、親要素からはみ出すのではなく親要素が小要素分広がった

  9. imgのwidthとheightの値を空にすると、画像が表示されなかった。

  10. imgの下に余分な隙間ができる。

  11. z-indexの優先順位が違った。

  12. IEはCSS3に対応していませんでした。

  13. floatの解除について。

floatしたブロック要素へmarginを指定すると、floatした方向へのmarginが2倍になった。

IE6で見ると両端のマージンが20pxになっていたでしょう。
解決策は以下の通り

  • floatしている要素にdisplay: inline;を指定する
  • floatした方向にはmarginを指定しない

バグを起こすサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">左へfloatする要素</div>
<div class="floatR">右へfloatする要素</div>
</div>
.floatL, .floatR {
  width: 200px;
  margin: 10px;
  color: white;
}
.floatL {
  float: left;
  background: blue;
}
.floatR {
  float: right;
  background: red;
}
左へfloatする要素
右へfloatする要素
float_margin_bug

解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">左へfloatする要素</div>
<div class="floatR">右へfloatする要素</div>
</div>
.floatL, .floatR {
  width: 200px;
  margin: 10px;
  color: white;
}
.floatL {
  float: left;
  background: blue;
  display: inline;
}
.contents {
  padding-right: 10px;
}
.floatR {
  float: right;
  background: red;
  margin-right: 0;
}
左へfloatする要素
右へfloatする要素
float_margin

目次に戻る

width/heightの値はpadding/borderも含んだ値になった。

後方互換モードのIE6で見ると、両ボックスの高さ・幅が200pxになっていたでしょう。
解決策は以下の通り

  • スターハックを使って、IE6のみ、width/heightpadding/borderを含めた値を指定する
  • width/heightpadding/borderは一緒に指定しない

バグを起こすサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">paddingした要素</div>
<div class="floatR">borderした要素</div>
</div>
.floatL, .floatR {
  width: 200px;
  height: 200px;
}
.floatL {
  padding: 10px;
}
.floatR {
  border: 10px #ccc solid;
}
paddingした要素
borderした要素
padding_border_bug

スターハックで解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">paddingした要素</div>
<div class="floatR">borderした要素</div>
</div>
.floatL, .floatR {
  width: 200px;
  height: 200px;
}
* html .floatL,
* html .floatR {
  width: 220px;
  height: 220px;
}
.floatL {
  padding: 10px;
}
.floatR {
  border: 10px #ccc solid;
}
paddingした要素
borderした要素
padding_border_hack

width/heightとpadding/borderを一緒に指定しないで解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">
<div>paddingした要素</div>
</div>
<div class="floatR">
<div>borderした要素</div>
</div>
</div>
.floatL div, .floatR div {
  width: 200px;
  height: 200px;
}
.floatL {
  padding: 10px;
}
.floatR {
  border: 10px #ccc solid;
}
paddingした要素
borderした要素
padding_border

目次に戻る

table内で同じ事をやると複雑な結果になった。

Mac Safari 5.1.2、Mac Chrome 16.0.9、標準準拠モード時のIE(全パージョン)
幅220px/高さ220px
後方互換モード時のIE6
幅220px/高さ200px
Mac Firefox 9.0.1、Opera 11.6
padding=幅220px/高さ200px
border=幅220px/高さ210px

tdにwidth/heightとpadding/borderを同時指定したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">
<table summary="width/heightとpaddingを同時に指定した時に起こるバグのテスト">
<tr>
<td>width/heightとpaddingを同時に指定したtd要素</td>
</tr>
</table>
</div>
<div class="floatR">
<table summary="width/heightとborderを同時に指定した時に起こるバグのテスト">
<tr>
<td>width/heightとborderを同時に指定したtd要素</td>
</tr>
</table>
</div>
</div>
#table-padding table td {
  width: 200px;
  height: 200px;
}
#table-padding .floatL table td {
  padding: 10px;
}
#table-padding .floatR table td {
  border: 10px #ccc solid;
}
width/heightとpaddingを同時に指定したtd要素
width/heightとborderを同時に指定したtd要素
table_padding_bug

tdにpadding/borderを、その中のdivにwidth/heightを指定したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">
<table summary="width/heightとpaddingを同時に指定した時に起こるバグのテスト">
<tr>
<td><div>paddingを指定したtd要素に入れたdiv要素</div></td>
</tr>
</table>
</div>
<div class="floatR">
<table summary="width/heightとborderを同時に指定した時に起こるバグのテスト">
<tr>
<td><div>borderを指定したtd要素に入れたdiv要素</div></td>
</tr>
</table>
</div>
</div>
#table-padding table td div {
  width: 200px;
  height: 200px;
}
#table-padding .floatL table td {
  padding: 10px;
}
#table-padding .floatR table td {
  border: 10px #ccc solid;
}
paddingを指定したtd要素に入れたdiv要素
borderを指定したtd要素に入れたdiv要素
table_padding

目次に戻る

marginにマイナス値を指定するとボックスからはみ出した部分が見えなくなった。

IE6で見ると、青いボックスの上部が20px分、途切れてしまったでしょう。
解決策は以下の通り

  • マイナスマージンとともにposition: relative;を指定する

青い方がバグを起こすサンプル、赤い方は解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">margin-topにマイナス値を指定した要素</div>
<div class="floatR">margin-topにマイナス値を指定した要素</div>
</div>
.floatL, .floatR {
  width: 200px;
  height: 200px;
  margin-top: -20px;
}
.floatL {
  background-color: red;
}
.floatR {
  position: relative;
  background-color: blue;
}
margin-topにマイナス値を指定した要素
margin-topにマイナス値を指定した要素
minus_margin

目次に戻る

width/heightに小さい値を指定すると、指定どおりにならなかった。

IE6で見ると、青いボックスのみ縦長に表示されたでしょう。
解決策は以下の通り

  • width/heightの指定とともにfont-size: 0;を指定する

青い方がバグを起こすサンプル、赤い方は解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL"></div>
<div class="floatR"></div>
</div>
.floatL, .floatR {
  width: 5px;
  height: 5px;
}
.floatR {
  font-size: 0;
}
small_size

目次に戻る

font-sizeをpx指定すると、ブラウザでのフォントサイズ変更ができなかった

IE6でフォントサイズを大きくまたは小さくしても、青枠内のフォントサイズは変わらなかったでしょう。
解決策は以下の通り

  • font-size(パーセント)で指定する

青枠内がフォントサイズが固定されたサンプル、赤枠内がフォントサイズが変えられるサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL"><p>font-sizeを12pxに指定した要素</p></div>
<div class="floatR"><p>font-sizeを75%に指定した要素</p></div>
</div>
.floatL {
  border: 10px blue solid;
  font-size: 12px;
}
.floatR {
  border: 10px red solid;
  font-size: 75%;
}

font-sizeを12pxに指定した要素

font-sizeを75%に指定した要素

px_percent

目次に戻る

ボーダーを透明にできなかった。

IE6では、左側だけ文字と同じ色のborderで囲われていたでしょう。
解決策は以下の通り

  • borderの代わりにpaddingを使う

左が透明のborderを使用したサンプル、右がpaddingで対応したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL"><a href="">透明のborderを指定した要素</a></div>
<div class="floatR"><a href=""><span>paddingで対応した要素</span></a></div>
</div>
.floatL a {
  border: 10px transparent solid;
}
.floatL a:hover {
  border-color: red;
  background: white;
}
.floatR a {
  padding: 10px;
}
.floatR a:hover {
  background: red;
}
.floatR a:hover span {
  background: white;
}
border_transparent

目次に戻る

overflow: visibleを指定しても、親要素からはみ出すのではなく親要素が小要素分広がった

IE6で見ると、グリッドを敷いた要素(#contents)の幅が、テキスト要素分広がってしまったでしょう。
解決策は以下の通り

  • はみ出た方向へはみ出た分だけ、マイナスマージンを指定し、position: relative;も同時に指定する
    position: relative;を指定しないとoverflow: visible;が有効にならなかった。

バグを起こすサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<p>margin-leftに600pxを指定した要素</p>
</div>
.contents {
  width: 800px;
  padding: 10px 0;
  overflow: visible;
}
p {
  width: 250px;
  margin-left: 600px;
}

margin-leftに600pxを指定した要素

overflow_visible_bug

解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<p>margin-leftに600pxを指定した要素</p>
</div>
.contents {
  position: relative;
  width: 800px;
  padding: 10px 0;
  overflow: visible;
}
p {
  width: 250px;
  margin-left: 600px;
  margin-right: -50px; 
  position: relative;
}

margin-leftに600pxを指定した要素

overflow_visible

目次に戻る

imgのwidthとheightの値を空にすると、画像が表示されなかった。

IE6/IE7で見ると、左側の画像は表示されなかったでしょう。
解決策は以下の通り

  • <img>width/heightの値を空にしない
    width/heightごと書かない場合は問題なく表示された

左がバグを起こすサンプル、右が解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL"><img src="thumbnail.gif" alt="ダミー画像" width="" height="" /></div>
<div class="floatR"><img src="thumbnail.gif" alt="ダミー画像" /></div>
</div>
特に指定なし。
ダミー画像
ダミー画像
image_size

目次に戻る

imgの下に余分な隙間ができる。

FirefoxやChromeなどで、<img>の下に数pxの隙間ができてしまいます。IEでは問題ないです。どっちがバグでどっちが仕様なんだろう…。
解決策は以下の通り。

  • <img>display: block;を指定する
  • <img>vertical-align: middle;を指定する
  • 画像を囲っている要素にline-height: 0;を指定する

バグを起こすサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL"><img src="thumbnail.gif" alt="ダミー画像" width="180" height="130" /></div>
<div class="floatR"><img src="thumbnail.gif" alt="ダミー画像" width="180" height="130" /></div>
</div>
.floatL, .floatR {
  background: white;
}
.floatL {
  border: 10px blue solid;
}
.floatR {
  border: 10px red solid;
}
ダミー画像
ダミー画像
image_bottom_bug

解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL"><img src="thumbnail.gif" alt="ダミー画像" width="180" height="130" /></div>
<div class="floatR"><img src="thumbnail.gif" alt="ダミー画像" width="180" height="130" /></div>
</div>
.floatL, .floatR {
  background: white;
}
.floatL {
  border: 10px blue solid;
}
.floatL img {
  vertical-align: middle;
}
.floatR {
  border: 10px red solid;
  line-height: 0;
}
ダミー画像
ダミー画像
image_bottom

目次に戻る

z-indexの優先順位が違った。

下のサンプルをIE6/IE7で見ると、手前から順に、orangevioletgreenredblueyellowの順に配置されたでしょう。
解決策は以下の通り。

  1. .section1.section2position: static;に変える

  2. .contentsposition: relative;を追加
    ※これで絶対配置する要素の基準が.contentsの左上になる。

  3. .inner1.inner2の配置位置を、.contentsの左上基準に変える

バグを起こすサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="section1">
<div class="inner1">上から3番目に表示される要素</div>
<div class="inner2">一番手前に表示される要素</div>
</div>
<div class="section2">
<div class="inner1">上から2番目に表示される要素</div>
<div class="inner2">一番背面に表示される要素</div>
</div>
</div>
.contents { padding: 10px; }
.section1, .section2 { position: relative; width: 450px; height: 250px; }
.section1 { background: yellow; }
.section2 { background: green; }

.inner1, .inner2 { position: absolute; width: 200px; height: 200px; }
.section1 .inner1 {
  z-index: 20; top: 50px; left: 100px; background: blue;
}
.section1 .inner2 {
  z-index: 40; top: 100px; left: 200px; background: red;
}
.section2 .inner1 {
  z-index: 30; top: -50px; left: 50px; background: orange;
}
.section2 .inner2 {
  z-index: 10; top: 0; left: 150px; background: violet;
}
上から3番目に表示される要素
一番手前に表示される要素
上から2番目に表示される要素
一番背面に表示される要素
z_index_bug

解決したサンプル

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="section1">
<div class="inner1">上から3番目に表示される要素</div>
<div class="inner2">一番手前に表示される要素</div>
</div>
<div class="section2">
<div class="inner1">上から2番目に表示される要素</div>
<div class="inner2">一番背面に表示される要素</div>
</div>
</div>
.contents { position: relative; padding: 10px; }
.section1, .section2 { position: static; width: 450px; height: 250px; }
.section1 { background: yellow; }
.section2 { background: green; }

.inner1, .inner2 { position: absolute; width: 200px; height: 200px; }
.section1 .inner1 {
  z-index: 20; top: 60px; left: 110px; background: blue;
}
.section1 .inner2 {
  z-index: 40; top: 110px; left: 210px; background: red;
}
.section2 .inner1 {
  z-index: 30; top: 210px; left: 60px; background: orange;
}
.section2 .inner2 {
  z-index: 10; top: 260; left: 160px; background: violet;
}
上から3番目に表示される要素
一番手前に表示される要素
上から2番目に表示される要素
一番背面に表示される要素
z_index

position: relative;は元居た痕跡を残し、position: absolute;は元居た痕跡を残さない

relativeでtop: 40px;した要素は、移動する前の領域を残して表示のみ移動させるのに対し、absoluteでは、移動する前の領域ごと移動している事が分かります。

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">
<div class="innerBox"><p>relativeした要素</p></div>
<p>relativeの下の要素</p>
</div>
<div class="floatR">
<div class="innerBox"><p>absoluteした要素</p></div>
<p>absoluteの下の要素</p>
</div>
</div>
.contents { position: relative; }
.floatL, .floatR {
  position: relative;
  width: 300px;
  background: transparent;
}
.contents p,
.contents .innerBox {
  border: 5px #ccc solid;
  background: white;
}
.contents .innerBox p { border: 0; }
.innerBox {
  top: 40px;
  width: 190px;
  height: 90px;
}
* html #relative-absolute .innerBox { width: 200px; height: 100px; }

.floatL .innerBox { position: relative; }
.floatR .innerBox { position: absolute; }

relativeした要素

relativeの下の要素

absoluteした要素

absoluteの下の要素

relative_absolute

ページの一番上へ