質問: ブラウザでの見た目の違い/internet explorerとfirefox internet explorer(6)とfirefox(1.5)の見た目の違いに悩んでいます。 webサイトを制作中ですがfirefoxでデザインが崩れているのです。 スタイルシートの関係だとは思いますがfirefoxでもinternet explorerでの見た目と同じようにすることは可能でしょうか? よろしくお願いします。
回答: > スタイルシートの関係だとは思いますがfirefoxでもinternet explorerでの見た目と同じようにすることは可能でしょうか? ieでの見た目というより、理想と思われる表示結果を実現することは可能である可能性が高いです。 > 出来れば制作中のwebサイトを見て頂き、アドバイスを頂けないでしょうか? 私が検証した限りになりますが。 #header h1 要素 margin プロパティ値の不正により無視されています。 #header p 要素 上記に伴い、位置がずれています。 メニュー部 リスト要素内の width, margin, padding, border の合計値が親要素の width を超えています。 css ではセレクタが #menu ul と指定されていますが、htmlでは "menu" は class 属性値です。 代表あいさつ部 float が適用されているボックスの高さが 280px になっていますが、内容はその高さを超えています。 css2 では clear プロパティはブロックレベル要素にしか指定できません。 text-align:justify; text-justify:inter-ideograph; justifyを指定すると、閲覧環境によって表示が崩れる可能性があります。 htmlソース 66行18字目、112行10字目、113行10字目 予期せぬ空白が含まれている可能性があります。 dtdには反しませんが、div 要素直下にインラインレベルの記述は好ましくありません。 htmlには一切関係ありませんが、"infomation" はスペルミスです。 ie6で理想と思われる表示がされているのは、実装不備が対応しているだけです。 ie6は margin プロパティ値などに単位が無くても補完して解釈します。 ie6は dtd以前に記述があると quirk モードで解釈され、width 値が margin, padding, border の値を含んだものとして扱われます。 メニュー部のマーカーが表示されていないのも単に隠れているだけで、list-style-type:none が効いているわけではありません。 代表のあいさつ部も、内容が親要素の幅を超えると可変するというieの特性です。