2行追加するだけで、簡単にIE6でもmin-heightを実現する方法

カテゴリ:CSSテクニック 2008年3月27日 15:11

CREAMU さんのところで書かれていたCSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』を参考に、サンプルを作ってみました。

自分でも覚えておきたいので備忘録的にもエントリーw
ちょっと前に書いた『CSSの1行でできるIE6対策(ハック)』と同じテクニックを使ったものです。
IE6 で下のサンプルを見てもらうとわかると思いますが、見事にmin-heightと同じ挙動をしています。

2行追加するだけで、簡単にIE6でもmin-heightを実現する方法デモ

解説は以下から。

▼EntryMore▼

解説

※サンプルで書かれている CSS の、重要な部分だけ抜き出しています。

上記の 2 行目に書かれているものは、そのままmin-heightですね。
問題は、その下の 2 行です。
height: auto !imporant;と書くと、当然その要素が必ず適用されます。つまり、この場合で言えばheightの値はautoということになります。

もちろん!imporantはIE6でも使えます。
しかし IE6 の場合、同じ宣言内の場合(今回のサンプルのような場合)、なぜか!imporantが無視され、その下で宣言されたものが適用されるのです。

そのため、IE6 だけはheight: 150px;と認識していることになります。
さらに、IE6 はボックスモデルが中途半端なこともあり、ボックス要素に明示的に高さや幅をしていても内容量に合わせてボックス要素の大きさが変わる、というバグがあります。
このバグも手伝って、まるで IE6 でもmin-heightが適用されているように見える、というわけです。

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSテクニック

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

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/69

トラックバック

ie6でmin-height

min-heightが使えないIEでも実質それと同等のことができるというこのテクニック、いまだにちょいちょい使うのでメモしておきます。 たとえば高さ100...

byツチノコラボ 2010年3月29日 10:58

コメント

1 - 通りすがり さん

まだまだ修行中のデザイナーです。
cssを、ここまで分かりやすく解説して下さる所あまり無いと思います。
サンプルも何個か頂きました。
ありがとう御座います!
ちょくちょくのぞかせて頂きます。

2008年4月25日 02:52

2 - えど Author Profile Pageさん

>>1 - 通りすがりさん
コメントありがとうございます!
CSSを始めたばかりの人でもわかりやすく、をコンセプトにサイトを作っているので、今回のコメントはとてもうれしかったです!

2008年4月25日 16:03