スポンサーサイト

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

関連エントリー

--/--/--(--) - スポンサー広告 - ranking(25) -

IE6とfirefoxでレイアウトが崩れる場合の対処法2

IE6とfirefoxでレイアウトが崩れる場合の対処法2

以前の記事で、XML宣言を削除してIE6とfirefoxのレイアウトのずれを直す方法を書きましたが、今回はその続編です。
XML宣言を削除してもレイアウトのズレは直るようですが
素人ながらもなんだかその方法はルールに背いてる感がしちゃうのはなぜでしょう
( ・ω・)
一応、XHTMLとはこうあるべき!という方法に反しているわけですから
できればルールに沿った方法でズレを直してみたいですね。
という事で、今回はCSSをを使ってfirefoxとIE6のレイアウト崩れを防ぐ方法を調べてみました。

IE6とfirefoxのレイアウトが崩れる理由



参考にさせていただいたサイト様はこちら。
IE6とFireFoxで知っておくべきmarginに関するCSSハック

上記のサイト様によると、IE6とfirefoxでレイアウトが崩れてしまうのは
各ブラウザによってcssのmarginの解釈が異なることが原因なんだとか。

CSSによっては、位置をfloat:right; や float:left;で設定されているテーマが沢山あります。
たとえば、当ブログでしたらメインの記事部分は

#main {
       float: left;
       width: 490px;
       text-align: left;
       padding: 0px;
       margin: 0px;
       background-color: #FFFFFF;
}

という風に、左側にfloatされるように設定してあります。

例えば、この記事の部分を右にすこしずらしたり下に下げたいなど
位置を変更したい場合にはmarginの値を変更すればいいのですが、
この「変更する値」の解釈がブラウザによって異なるのですね。

margin: 10px; という風に設定して、左右上下に10pxづつ余白を取ろうとすると
firefoxでは左右上下10pxづつ、設定した通りの余白が生まれますが
IE6では倍の20pxづつの余白が生まれてしまうのです。

この事が原因で、firefoxで表示すると大丈夫なのに
IE6で見てみるとカラム落ちしていたり、文字が重なってしまったり
色々とレイアウトが崩れてしまうという現象が発生してしまいます。

CSSを変更してブラウザによるレイアウトの崩れを直す



このレイアウト崩れの対処方法として、IE6に対応する
*html bodyというCSSを追記で加えて、そのCSSのmarginの値を
半分に設定する事で両方のブラウザで対応することができるようです。

#main {
       float: left;
       width: 490px;
       text-align: left;
       padding: 0px;
       margin: 10px;
       background-color: #FFFFFF;
}
というCSSでIE6でレイアウトが崩れてしまう場合、IE6で見た時用に
*html body#main {
       float: left;
       width: 490px;
       text-align: left;
       padding: 0px;
       margin: 5px;/*IE6用にmaiginを半分に設定*/
       background-color: #FFFFFF;
}
をスタイルシートに追加してあげればOK!
また、IE7ではこの「marginが倍になってしまうバグ」は改善されているようですが
やはり少しfirefoxと見た表示とは異なる部分があるので、
IE7用には
*+html body という要素を付け加えれば大丈夫だそうです。
IE7のみのCSSハックは
*:first-child+html {} 
が使用されるようです。 参照:IE7 の CSS ハック
IE7 を含むモダンブラウザ向けの CSS ハックまとめ

IE6でレイアウトが崩れる事の対処法まとめ



CSSはまだまだ勉強中ですが、こうやって実践で覚えていくと
難しいけれど楽しいです。
知識がある方々が、ブログなどで解説してくれているのは
すごくありがたいですね!
他にもこういった方法があるよ、といったご意見や
訂正部分がありましたらコメントいただけると嬉しいです(・∀・)
スポンサーサイト

↓↓記事更新の大きな励みになっていますので
記事が参考になりましたら、ランキングのクリックお願いします。
人気ブログランキング ブログ村アフィリエイトランキング

ついでにブックマークもどうぞ(`・ω・´)ゞ

関連エントリー

2008/04/19(土) - HTML・CSS - ranking(25) - comment(3)

コメント

IE7だと、トップのバーが少し左に寄っています

2008/04/20-02:16 | URL | 774 #-[ Edit]

>>774さん
ご指摘ありがとうございます。
現在、IE7ではレイアウトのズレが発生しているようです。
只今修正していますので、ご迷惑をお掛けしますがもう少しお待ち下さい。

2008/04/20-18:25 | URL | k子 #-[ Edit]

こんにちは
FirefoxとIE6のxml宣言ありとIE5.5以前ではpaddingとborderが横幅、高さとも含まれてしまうようです。

簡単な対策としてdivを二重にして外側にmarginと横幅、
内側にpaddingとborderとして指定し、同じボックスではpaddingとborderをwigthとheightを同時に指定しない方法をとる場合が多いようです。

2009/06/01-13:20 | URL | Max #-[ Edit]

コメントの投稿


管理者への秘密のコメント

track feed