1. Home
  2. Archive
  3. IE6のmin-width、min-heightハックに関して

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の実装方法についてまとめた記事を書きました。

トラックバック一覧

  1. ＷＥＢデザイナーのためのボケ防止対策 2008年7月25日 12時30分

    min-heightをIE6で実装（CSS）…

    min-heightをIE６でも実装したかったので何かないかと探したらいいのを見つけた。

    すごく簡単だが思いつかない！ってことで「すげー！」って思・・・

コメント一覧

  1. nex 2008年3月26日 11時56分

    はじめまして。

    たしかに、この方法に若干違和感感じあります。

    例えばどういう実装方法があるのでしょうか？

    あまり使う機会がないもので。

  2. hoka（管理人） 2008年3月26日 14時25分

    ＞nexさん

    はじめまして。
    min-widthの実装方法はいろいろありますので、別エントリーにまとめました。
    http://webtech-walker.com/archive/2008/03/26142420.html

    よろしかったら参照してください。

  3. なかにしゆうすけ 2008年3月26日 16時17分

    > min-widthのほうは動かない気がする
    IE6で問題なく動作確認できましたよ。
    他のバージョン、ブラウザは確認してませんが。。

  4. hoka（管理人） 2008年3月26日 17時10分

    ＞なかにしゆうすけさん

    検証ありがとうございます。
    ということは、僕の書いたソースが間違ってるのか僕のIEがバグってるかのどちらかということですね。

    ちなみに↓のようなソースで試したんですけど、もしよろしければ見ていただければと。
    http://webtech-walker.com/sample/html/min-width.html

  5. なかにしゆうすけ 2008年3月26日 17時34分

    すみません。嘘ついてました（勘違いしてました）。
    http://yusukenakanishi.com/verification/01.html

    文字サイズが大きくなったらmin-widthだから広がらないといけないのに。。なってませんね。
    何でですかねー？

  6. hoka（管理人） 2008年3月26日 17時53分

    ＞なかにしゆうすけさん

    おーなるほど。やはりそうですよね。おそらくこのスタイルだと、
    ・min-widthを実装しているブラウザは可変幅となり、min-widthで指定した最小幅が適用される
    ・IE6だとwidthで指定した幅で固定幅になる

    という動作になると思うんですよ。やはり元記事が間違っているのかな・・・？

  7. なかにしゆうすけ 2008年3月26日 18時28分

    元記事が間違ってるんですかねぇ。。
    ま、min-widthはjavascriptでやるのが確実ってことですかね。あんまり使うことないですが。。

  8. hoka（管理人） 2008年3月26日 18時38分

    ＞なかにしゆうすけさん

    そうですね。僕もjavascriptでやるのがいいと思います。
    ちなみに、このブログはmin-width使ってますが、IE6のみ固定幅にしてたりします。

  9. mino 2008年3月26日 22時32分

    はじめまして。

    このブログはmin-widthを使ったエラスティックレイアウトなんですね。
    で、win Firefoxの環境でCtrl+マウスでぐりぐり(いわゆるzoom?)をしていて気が付いたんですが、幅を広くするとロゴ画像が引き伸ばされますね。

    そこで質問させてください。
    CSSを拝見させていただいたのですが、h1 imgにwidth:19.3em;の値を指定していますが、emでの指定はどうゆう意図なのでしょうか？

  10. hoka（管理人） 2008年3月26日 22時54分

    ＞minoさん

    はじめまして。コメントありがとうござざいます。

    タイトル画像の幅をemで指定しているのは、このブログのコーディングをした当時、エラスティックレイアウトって、画像もemで指定して伸び縮みするものだと思っていたからです。

    最近ではエラスティックレイアウト的な動作はブラウザ側での実装い任せたほうがいいという考えなので、そのうちエラスティックは採用しない方向にするつもりです。

    質問の答えになったでしょうか？

  11. mino 2008年3月26日 23時08分

    答えになりましたー！

    コメントを書いた後にエラスティックレイアウトについての記事を拝見しまいた。
    ご丁寧にありがとうございましたー。

コメントフォーム

※HTMLタグは使用できません。