2007-10-05 (金)
■ IE5 以上 (含む Macintosh 版) で min-width を実現する CSS ハック
IE6 以下で min-width を実現する CSS ハックがよく紹介されていますが、 その多くは後方互換モード (Quirks Mode) 用で、 標準準拠モード (Standards Mode) では機能しません。 標準準拠モードで使える方法が欲しかったので、探し出してきました。
ここにいくつかの例が載っていますが、 そのうちの４番、５番は、次のような特徴を持つかなり万能な方法です。
- 標準準拠モードにも対応
- IE 5.0 や Macintosh 版 Internet Explorer にも対応
- float は使わずに実現
下手にここで解説するよりも、上のリンク先を実際に見て欲しいのですが、 基本的な部分だけ書き出しておくと、こんな HTML と CSS で実現されています。
<div class="width"> <div class="minwidth"> <div class="container"> </div> </div> </div>
.width {
min-width: 300px;
background: #fff;
}
* html .minwidth {
border-left: 300px solid #fff;
}
* html .container {
margin-left: -300px;
position: relative;
}
/*\*/
* html .minwidth,
* html .container,
* html .content {
height: 1px;
}
/*/
.width {
display: inline-block;
}
/**/
つまり、
- 背景色と同じ色のボーダーで幅を確保
- ネガティブマージンを使ってその上に載せる
- Windows 版 IE では hasLayout = true にセット
という仕組みですね。 <div> タグを２重、３重に使わなければならないのが嫌ですが、 JavaScript を無効にしていても使える方法なので、 覚えておいて損はないと思います。
このエントリの続き: 2007-10-11 (木)
[コメントを書く]
本日のリンク元
- 10 http://granshe.blog.shinobi.jp/Entry/16/
- 6 google検索(t)
- 5 google検索(minwidth)
- 4 google検索(minwidth)
- 4 google検索(html min-width)
- 3 google検索(min-width css ハック)
- 3 google検索(ie min-width)
- 3 google検索(css min-width IE)
- 3 google検索(IE min-width)
- 3 http://www.google.co.jp/hws/search?hl=ja&q=ｐｈｐ ...
- 3 BIGLOBE検索(HTML min-width)
- 2 http://www.revulo.com/
- 2 google検索(minwidth)
- 2 google検索(min-width)
- 2 google検索(min-width ie6)
- 2 google検索(min-width)
- 2 google検索(mac IE min-width)
- 2 google検索(IE min-width)
- 2 google検索(min-width 互換モード)
- 2 google検索(IE min-width 修正)
- 2 google検索(t)
- 2 google検索(min-width ie)
- 2 google検索(min-width IE6)
- 2 google検索(min-width)
- 2 google検索(min-width)
- 2 google検索(css div min)
- 2 google検索(IE6 min-width 標準)
- 2 google検索(CSS width 以上)
- 2 google検索(mac ie min-width)
- 2 google検索(minwidth)
- 2 google検索(min-width CSS IE 無効)
- 2 google検索(css min-width ie)
- 2 google検索(css min-width)
- 1 http://www.megite.com/tag/width
- 1 google検索(win ie min-width)
- 1 google検索(minwidth)
- 1 google検索(min-width ie6)
- 1 google検索(min-width ie jquery)
- 1 google検索(min-width)
- 1 google検索(ie6 min-width)
- 1 google検索(css IE5 float width)
- 1 google検索(IE6 min)
- 1 google検索(IE で min-width)
- 1 google検索("min-width" IE6)
- 1 google検索(mac IE min-width)
- 1 google検索(IE5以上ハック)
- 1 google検索(css min width)
- 1 google検索(min-width ie6)
- 1 google検索(min-width ie)
- 1 google検索(mac ie min-width)
- 1 google検索(minwidth)
- 1 google検索(css width)
- 1 google検索(minwidth)
- 1 google検索(min-width mac IE)
- 1 google検索(css 以上 width)
- 1 google検索(min-width CSS)
- 1 google検索(以上 含む)
- 1 google検索(minwidth)
- 1 google検索(CSSバグ min-width)
- 1 google検索(min-width ie8)
- 1 google検索(minwidth)
- 1 google検索(min-width javascript)
- 1 google検索(html min-width width)
- 1 google検索(css 幅)
- 1 google検索(CSS min-width)
- 1 google検索(ネガティブマージン min-width)
- 1 google検索(<div class="minwidth">)
- 1 google検索(css ie5 ネガティブマージン)
- 1 google検索(css min-width ie)
- 1 google検索(jquery min-width)
- 1 google検索(min-width windows ie)
- 1 google検索(css min-width ie)
- 1 google検索(css ie min-width)
- 1 google検索(ie6 min-width)
- 1 google検索(mac IE min-width)
- 1 google検索(ie min-width mac)
- 1 google検索(float 2コラム 5.0)
- 1 google検索(css width 以上)
- 1 google検索(jquery IE5)
- 1 google検索(ｊQuery min-width)
- 1 google検索(CSS min-width div)
- 1 google検索(IE5 width)
- 1 google検索(css min-width)
- 1 google検索(css ie6 min-width)
- 1 google検索(ie5 container width)
- 1 google検索(min-width ie import)
- 1 google検索(IE5 min-width)
- 1 google検索(mac ie5 カラム落ち)
- 1 google検索(ie ハック min-width)
- 1 google検索(t)
- 1 google検索(t)
- 1 google検索(t)
- 1 google検索(7)
- 1 google検索(html min-width)
- 1 google検索(Mac版Internet Explorer 5 margin css)
- 1 google検索(IE6 min-width jquery)
- 1 google検索(minwidth)
- 1 google検索(windows ie min-width)
- 1 google検索(minwidth)
- 1 google検索(min-width jquery)
