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

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

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

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

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づつ、設定した通りの余白が生まれますが
IE６では倍の20pxづつの余白が生まれてしまうのです。

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

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

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

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

というCSSでIE6でレイアウトが崩れてしまう場合、IE６で見た時用に

*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 という要素を付け加えれば大丈夫だそうです。
ＩＥ７のみのＣＳＳハックは

*:first-child+html {} 

が使用されるようです。 参照：IE7 の CSS ハック
IE7 を含むモダンブラウザ向けの CSS ハックまとめ

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

• XML宣言を削除してしまう
もしくは

• IE６用に*html bodyのCSSを追加する

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

↓↓記事更新の大きな励みになっていますので
記事が参考になりましたら、ランキングのクリックお願いします。

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