Webtech Walker

IE6のmin-width、min-heightハックに関して

CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』
という記事を見かけたんですが、min-widthってこれじゃダメな気がするんです・・・

IE6では min-height や min-width が効かないため、それを効かせるためにはいろいろなハックやブラウザごとのスタイルシートが必要だった。 しかし以下のようにすればIE6にも対応したものが実現できる。

min-widthのソースは以下のとおり

.bar {
  min-width: 100px;
  width: auto !important;
  width: 100px;
}

min-widthはIE6で実装されていないので、無視されます。そして、同一ブロック内では!importantが無視されるというIE6のバグを利用して「width:100px」をIE6のみに適用させてますが、これじゃただ幅100pxを指定しただけでは?と思うのです。min-widthの動作って最小幅が100pxになるってことですよね。これだと100pxで固定な気がします。

ちなみにmin-heightの場合は大丈夫だと思います。

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

これはボックスサイズが内容物に合わせた大きさへ強制的に調整されるというIE6のバグを利用して、IE6のみ「height:100px」を適用することでコンテンツが100px以下のときは100pxになり、100px以上になると高さを拡張するためです。

自分でもやってみたけどやっぱりmin-widthのほうは動かない気がする・・・でも元記事のトラバとか見ると、うまくいった!って書いてあるし、大元の英語の記事は読めないし、ちょっと自信なくなってきました。誰かわかる方、教えてくだせぇ。。。

追記:min-widthの実装方法についてまとめた記事を書きました。

このエントリーをはてなブックマークに追加