てんぽ: WinIEの崩れをheight: n%で直す

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

WinIEの崩れをheight: n%で直す

2006年01月19日(木)

WinIEではフロートや位置指定されたボックスのコンテナブロックに幅が指定されていないと「ひどいこと」になりがちです。 コンテナにwidth: 100%で直るとはいえ、それだとボーダーやパディングを同時指定できない。 幸い(?)Quirksモードではwidthがborder-boxで計測されるので、「IE Quirksのみにwidth: 100%」でうまくいく。 でもこの方法では「ブラウザ振り分け」とか「Standardsモードで崩れる」とかあってなんとなくイヤだった。

実はこういう場合、height指定でも直るらしい。 しかも、heightを%単位にすれば、CSSを仕様どおりに解釈できるブラウザには無害というのが素晴らしい。

つまり、親要素(コンテナの親)のheightがauto(初期値)の場合、その子(コンテナ)でheight: n%とやっても、(まともなブラウザなら)その算出値はautoになるので弊害はない。 そしてIEはコンテナにheight: n%と書いてあるだけで何故か例のバグが直る。

問題はどれだけのブラウザがheight: n%を仕様どおりに解釈できるか。Mozilla、Opera7、IE6(いずれもStandardsモード)は問題なし。 IE6 Quirksモードは駄目だけど、height: 1%とかすればoverflow: visibleのバグがいい感じに作用してうまくいく。

実はこれ、「Holly hack」と呼ばれているらしい。

/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */

こんな風にMacIE避けをした上でIEだけに読み込ませてるけど、単に.floatholder {height: 1%;}でいいのでは。 MacIEに別のバグ(heightの%値指定が要素の幅に対する%値になる(IE5))があるというなら、 子供セレクタでheight:auto;を上書きすれば充分だと思う。

というわけで、サンプル。 背景色と背景画像、ボーダー、パディング指定のあるdivの中に、通常の見出し、左フロート、右フロート、クリアーの各ボックスがある。

#66
カテゴリ:HTML・CSS
タグ[ CSS IE ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/66-05b30b9a

<<DVDのメニューにデスクトップ用壁紙 | background-positionの%値について>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。