クロスブラウザ・ブラウザを選ばないレイアウト
FirefoxとIEの表示の違いに悩まされてきたオレ。
解決策がまとまってきたのでこの辺でまとめ記事を。
まず、FirefoxとIEに限った事ではなく、クロスブラウザという事で考えていく。
基本はXHTML1.0でまとめてありますが、HTMLでももちろん使えます。
DTDで変わるDOCUMENTスイッチ
DTDやXML宣言の違いでブラウザの標準準拠モード、過去互換モードのどちらかが採用される。
これによって各ブラウザが標準準拠モードを採用するのか、それとも過去互換モードを採用するすかを把握しておく。
もちろん標準準拠モードを基本にページを作っていく。
- DTD、標準準拠モード、過去互換モードについてのエントリー＆外部リンク
- FirefoxとIEの表示の違いをどう解決するか？
- Firefox IEの表示の違い クロスブラウザ、ブラウザ互換
- Firefox IE レイアウトの崩れを無くす ウェブ標準 DTD
- Google Document Disply Mode
XML宣言あり、IE6のみ過去互換モード
XHTML1.0でページを作ろうとした場合、XML宣言をしなければIE6も標準準拠モードが採用されます。
でも、XML宣言はしておきたいので、IE6は過去互換モードが採用されている前提で進めます。
IE6の過去互換モードではボックスのwidthプロパティの解釈の違いがあります。
- 標準のwidthプロパティ
- コンテンツの幅＝widthプロパティの値
- IEの過去互換モードのwidthプロパティ
- コンテンツの幅+padding+border＝widthプロパティの幅
つまり標準準拠モードの幅より、IE6の過去互換モードの幅の方が、padding+borderの分だけ小さくなってしまうわけです。
高さに関しても同じです。
これが、レイアウトが崩れる原因のひとつです。
解決策として
- widthプロパティとpadding、borderを一緒に指定しない
- IE6に対してCSSハックを利用する
CSSハックは最後の手段として使うつもりで、本来のCSSで何とかしたいです。
- ボックスのwidthプロパティの解釈、CSSハックについてのエントリー
- Firefox IE レイアウトの崩れを無くす ウェブ標準 DTD
- CSS ボックスモデル
- FirefoxとIEの表示の違いをCSSでなんとかする
- Firefox IEの表示の違い CSSハック
IEでfloatしたボックスが下にずれてしまう
マルチカラムレイアウトで、floatさせたボックスが下にずれて2カラム、3カラムのレイアウトが崩れてしまう事があります。
これもIEのバグで、
floatさせているボックス要素にmarginやpaddingを指定すると、値が2倍になってしまいます。
そのためボックスの幅が大きくなり下にずれてしまうことがあります。
右floatの右のmarginは0に、左floatの左のmarginは0にするか、paddingとmarginを指定しないようにする事で回避できます。
IE6でセンタリングされない
ページの全体をセンタリングするには、コンテナボックスの左右マージンを「auto」に設定する。
ただし、IE6の過去互換モードでは、このように指定してもセンタリングされないという問題があるため、body要素にtext-alignプロパティで「crnter」としていておく。
これだけだと、子孫要素のボックスもセンタリングされてしまうので、コンテナボックスでtext-alignプロパティで「left」を指定しなおす。
その他、backgroundで指定した画像が表示されない
IEでbackgroundで指定した画像が表示されないというケースが出ています。
このブログがそうです。
Firefox、safariではキチンと表示されていますが、IEでは6、7ともに表示されていません。この症状の解決策は検索中です。
Comments
What say you?
Track backs
http://digdagdig.blog117.fc2.com/tb.php/153-b180e7b0
