ブラウザでの見た目の違い／Internet ExplorerとFirefox

質問

Internet Explorer（６）とFirefox（１．５）の見た目の違いに悩んでいます。
Webサイトを制作中ですがFirefoxでデザインが崩れているのです。

スタイルシートの関係だとは思いますがFirefoxでもInternet Explorerでの見た目と同じようにすることは可能でしょうか？

よろしくお願いします。

回答No.2

quads · ベストアンサー

> 次のところが具体的にどの様に修正すれば良いのか、どうしても分からないのですが。
少なくとも何らかの解釈をされたと思いますが、何が分からなかったのでしょうか。

> > #header h1 要素
> >　margin プロパティ値の不正により無視されています。
HTMLソース 21行目の見出し 『カーナビ カーセキュリティの持込取り付け』
ページ中では h1 要素に対して margin の指定で上部に余白を取っているようですが、
CSS では『margin:50px 0 0 5;』と0以外の値に単位がついていないため、このプロパティが無視されています。
『margin:50px 0 0 5px;』と記述すべきです。

> > #header p 要素
> >　上記に伴い、位置がずれています。
この後の3行の文章は、前述の要素の高さを利用して配置されているようですが、
h1 要素の margin の無効化によってFxでは上部にずれています。
IEではプロパティ値に単位が無い場合でも補完されるために無効化されずh1要素の上部にマージンが取られています。

> > メニュー部
> >　リスト要素内の width, margin, padding, border の合計値が親要素の width を超えています。
本来、width は padding よりも内側の内容領域の幅を示す値です。
しかしながら、WinIE5.5などの一部のブラウザ（IE6 quirkモード）では、width が margin, border, padding まで含んで計算されています。
"IE"の表示結果を基準とするのであれば、指定しているwidthプロパティ値から margin, border, padding の値を減算する必要があります。

> >　CSS ではセレクタが #menu ul と指定されていますが、HTMLでは"menu" は class 属性値です。
"#menu ul" というセレクタは、menu を id 属性値として持つ要素に包含される ul 要素に対して適用されます。
CSS に記述している "#menu ul" は ".menu ul" の間違いである可能性があります。

他に指摘した部分については理解されているのでしょうか。

お礼

quadsさん

返答が遅れ申し訳ありません。

ご指摘頂いた箇所、手直しを進めています。

大変勉強になりました。

回答No.1

quads

> スタイルシートの関係だとは思いますがFirefoxでもInternet Explorerでの見た目と同じようにすることは可能でしょうか？
IEでの見た目というより、理想と思われる表示結果を実現することは可能である可能性が高いです。

> 出来れば制作中のWebサイトを見て頂き、アドバイスを頂けないでしょうか？
私が検証した限りになりますが。

#header h1 要素
　margin プロパティ値の不正により無視されています。
#header p 要素
　上記に伴い、位置がずれています。
メニュー部
　リスト要素内の width, margin, padding, border の合計値が親要素の width を超えています。
　CSS ではセレクタが #menu ul と指定されていますが、HTMLでは "menu" は class 属性値です。
代表あいさつ部
　float が適用されているボックスの高さが 280px になっていますが、内容はその高さを超えています。

<br style="clear:both;" />
　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の特性です。

お礼

quadsさん、ありがとうございます。
早速ご指摘頂いた点を見直してみます。

またこの場で報告させて頂きます。

補足

quadsさん
もう少し教えて頂けないでしょうか？
次のところが具体的にどの様に修正すれば良いのか、どうしても分からないのですが。
よろしくお願いします。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
#header h1 要素
　margin プロパティ値の不正により無視されています。
#header p 要素
　上記に伴い、位置がずれています。
メニュー部
　リスト要素内の width, margin, padding, border の合計値が親要素の width を超えています。
　CSS ではセレクタが #menu ul と指定されていますが、HTMLでは "menu" は class 属性値です。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－