IE6の疑似min-heightは奇跡のCSSトリック

公開日: 2015年12月8日
タギング: Advent Calendar; CSS

“昔々あるところに……。” CSS 昔話 Advent Calendarの 8 日目。

IE6 では min-width/max-width/min-height/max-height の CSS プロパティーに対応していないが、min-height に限っては IE6 でも疑似的に同じ表現をすることができた。

.box {
  min-height: 100px;
  height: auto !important;
  height: 100px;
}

Easiest cross-browser CSS min-height

min-heightに対応しているモダンブラウザでは.boxはmin-height: 100pxによって 100px 以上の高さが保証されるとともに、height: 100pxはその前の行のheight: auto!importantによって上書きされ、コンテンツが 100px に収まらない場合はコンテンツ量に応じたボックスサイズとなる。

IE6 ではまず未対応プロパティーのmin-height: 100pxは無視される。さらに IE6 では、_同一の宣言ブロック内に同じプロパティーが指定された上で、先に書かれたプロパティーに!importantがついている場合、!importantを無視してあとに書いた値で上書きする_。つまりheight: 100pxのみが適用された状態になる。この!importantを無視する挙動はheightに限らず他のどんなプロパティーでも同じだったと思う。

/* IE6での解釈 */
.box {
  min-height: 100px; /* 無効 */
  height: auto !important; /* 無効 */
  height: 100px; /* 有効 */
}

宣言ブロックが分かれていれば IE6 でも!importantは仕様通りに解釈される。

/* 宣言ブロックが分かれていれば IE6 でも期待通り */
.box {
  height: auto !important; /* 有効 */
}

/* !important によって上書きされるので 100px の指定は無効になる */
.box {
  height: 100px;
}

CSS の仕様上、heightプロパティーに固定値が指定されるとボックスの高さはその値で動かなくなり、コンテンツがその値に収まらなければoverflow: visibleの初期値に従い下方向へはみ出して表示される。

しかし IE6 ではそうならない。コンテンツが.boxの高さに収まらなくなると、.boxの高さに固定値が指定されていたとしてもコンテンツ量に応じて.boxの高さが伸びていく。コンテンツが収まるときは.boxは 100px 未満にはならない。あたかも*min-heightとheight: auto*が指定されているかのように振る舞う。

この「同一宣言ブロック内の同一プロパティーの!importantが無視されるバグ」と「heightのサイズ算出のバグ」の併せ技によって、IE6 とモダンブラウザで同じ表現が可能になるというわけだ。

これは奇跡の組み合わせだと感じる。ボックスのサイズ算出のバグが起こるのはheightだけで、widthではそのようなことは起きなかった。IE6 で height だから可能だったのだ。

このスニペットが日本のブログで紹介されると瞬く間に広まったが、IE7 や IE8 でどう解釈されるのかを懸念する人もいくらかいた。IE7 以上はmin-heightに対応しているので、!importantが IE6 同様に無視されるとheight: 100pxが適用されてmin-heightの記述が無意味になるのでは？という懸念だ。

しかし実際はこの!importantのバグは IE7 で解消され、モダンブラウザと同じくmin-height: 100pxとheight: auto!importantが解釈されて期待通りの表示となるのであった。

CSS の文法として valid で、IE6 のみにターゲットをしぼり、他のブラウザに影響を与えず、記述も非常にシンプル。このスニペットも「CSS ハック」ではなく「CSS トリック」と呼びたい。まるで初めからそこにあったかのような、かつ手のひらにちょうど収まる感じがする、そんな存在感のあるスニペット。今では全く使わなくなったが、あの頃を思い出すと暖かい気持ちになれる気がするのだ。気がするだけだが。

特定の条件で!importantをなかったことにできる IE6 ってやっぱりやばかったなと思う。HTML コメントを地のテキストに勝手に変換するバグといい、なかなかの逸材だったと認めざるを得ない。

CSS 昔話 Advent Calendar では今日以後のエントリでも、IE6 のような 10 年以上前のブラウザ達がいかに奇妙なレンダリングをしていたかを振り返ることができるだろう。CSS ハックとして紹介していた頃と決定的に違うのは、それらがモダンブラウザ時代の目線で語られることだ。単なる苦労話の共有におさまらない、時世を反映した回顧録。今後どんな話が出てくるのか、本当に楽しみにしている。

前回のエントリでは人の古傷をえぐってしまって申し訳ないと思った。だけど人は過去を乗り越えていける……強い生き物だと思うから……。

9 日目は@ksk1015さんです。