ホームページのＣＳＳについて

ＩＥと火狐ではＣＳＳでの表示方法が異なります。
現在ホームページはＩＥに合わせてＣＳＳを組んでいるのですが、
知人から（火狐利用者）「ホームページの表示が変！」と指摘がありました。

そこで、ブラウザシェアを調べたら国内でＩＥが９４％でダントツだと言うことが分かりました。
しかし、火狐を使ってる人も結構いるのが現実・・・

どちらか片方のブラウザに合わせてＣＳＳをこのまま組んでいくのか、両者が快適に観覧できるようにJavaScriptなどでブラウザ毎にページとＣＳＳを作って分散するのがいいのか・・・
後者だとページ数が増えるごとに作業量が２倍になるのですが・・・

企業用のホームページではないのでそこまでこだわる必要はないのでしょうか？
「こうしたらいいよ！」とか「こうすることであまり手間をかけずに解決できるよ！」とかみなさんの意見を教えていただけないでしょうか？よろしくお願いします。

No.1 回答者： einn 回答日時： 2011/06/30 19:53

んー？おかしいですね。

私もCSSをベースにHTMLを利用していますが、
いたってレイアウトに異常はないですよ？
グーグルクローム、火狐、IEで検証してますけど…。
javaなんぞメンドイので一切使ってませんが、不都合ないです。

個人で作っているページですが、
ご飯を食べるために運営してるので企業以上に気を使ってます。
（ページ数200以上で、年間200万ユニークの中堅サイトです）

正しい記述なら表示が狂うことはほぼないはずです。
それこそwin98の頃やwinXPの頃ならありましたけど。
具体的に、どのあたりがおかしいんですか？

そのおかしい部分のCSSとHTMLはどんな記述なんでしょうか。

この回答への補足

例えば
********************************************************
.html
<DIV id="a">
<img src="aaa.jpg">
<DIV id="b">
　～
説明文
　～
</DIV>
<DIV id="c">
　～
リンク
　～
</DIV>
</DIV>

********************************************************

だとすると
スタイルシートは
********************************************************

.css
#a {
margin-right: auto;
margin-left: auto;
text-align: left;
width: 900px;
background-color: #FFFFFF;
}

#b {
float: right;
width: 635px;
height: 250px;
padding-top: 10px;
padding-bottom: 50px;
display: inline;
margin-right: 10px;
background-color: #FFFFFF;
}

#c {
float: left;
width: 245px;
height: 250px;
padding-top: 10px;
padding-bottom: 50px;
display: inline;
margin-left: 10px;
background-color: #FFFFFF;
}

********************************************************
しないと火狐では思った通りに表示されず
ＩＥの場合は、id bとｃの幅や高さ、背景カラーを指定しなくても表示されます。
こう書くのが普通とかもっと細かく書くべきだ！と言われてしまえばそれまでですが、
私の場合ＩＥでしか今まで確認したことがなかったので戸惑ってしまいました。
ましてや趣味で運営しているので収入を得れるような技術すらありません。

補足日時：2011/06/30 22:13

No.2 回答者： saintandre 回答日時： 2011/06/30 20:35

あくまで個人の経験則ですがIEとFFでたしかにCSSの表示方法は同じですが

デフォルトの値が双方で違うことによる違いがでてくることはあるようです

つまりh1タグやpタグが指定しなくても最初から持っている上下のマージンや
liタグが持っている左側のパディングなどで表示が違ってくることがあるようです


表示が崩れている部分に注目して指定していない値も指定してみると直るかもしれません

この回答への補足

ＩＥだと特に書かなくても問題なく表示される部分でもＦＦだと書かないと表示されない部分があるみたいですね。

補足日時：2011/06/30 21:54

No.3 回答者： naokita 回答日時： 2011/06/30 22:26

IEシェアが94％！？　10年前ならわかりますが、ありえないですね。

http://www.samurai-factory.jp/info/2011/20110603 …
また、
IEといっても、IEのバージョンによる違いが問題。
IE5.x for Mac、 WinIE6、IE7、IE8、IE9、IE10 Platform Preview、
---------------
逆に、ここのウェブ関連の回答者で、IEをメインで利用する人の方が少ないですよ。
ウェブ制作者は、
IEが独自仕様やW3Cに準拠しないレンダリングをする事をわかっているので、
IEをメインで制作する人は居ないでしょう・・・
但し、
IEを使っているユーザーを無視するような事はしませんから、
当然、IEのバージョンに合わせて崩れない様に修正、
または、IEでも崩れないように最初から設計します。

W3Cの基準通りに制作していれば、
ブラウザのバグによる事もありますが、崩れる可能性は低い。
但し、IEは独自性を追求したので崩れる。
もしくは、MSの技術的な問題か？いい加減な体質の問題？・・・

質問者さんのウェブサイトは、
Firefoxが悪いのではなく、IEのバグ・・・　その可能性が99％

ここ数年のIEは大きな問題は無いですが、
制作者がHTMLの仕様を知らずに過去互換モードで制作すると、
CSSの解釈の違いで、IEとFirefoxでは差異がでるでしょう。

--------------
つまり、※ 正しいHTML,CSSで書く事！
１、HTML,DTDを標準モードで作り、互換モードにしない事！
２、IE独自の仕様を使わない事！
３、旧IEのバージョン別に対策をする事。
　　（センター配置とか、フォントサイズなどなど・・・）
※ 他のブラウザは正しくレンダリングされるので、
　IEだけ別のCSSへ分岐させたり、バージョン別ハックを使ったりします。
但し、HTML,CSSが正しい事が前提です。

回答としては、
何の為のウェブサイトですか？
自己満足ならそのまま放置で良いでしょう。
情報公開が目的ならFirefox,Chrome,Safari,Operaも無視できません。
（W3C基準に沿っているので崩れる可能性の方が低いですが）

No.4 ベストアンサー 回答者： naokita 回答日時： 2011/06/30 23:22

NO.3　naokitaです。

　NO.3回答後に、NO.1さんの補足を見ました・・・
floatの間違った解釈で、
質問者さんもIEも間違っています・・・
趣味か商用かは無関係だし、誰もが最初は初心者。
綺麗にしたいなら勉強すれば良いし、
時間が無い、面倒と思う人も居れば、それで妥協する人も居ます。
価値観の問題なので、その辺は自分の判断で好きにした方が良いです。
オリジナルな「物作り」って、スキル、費用、時間、満足or妥協の相互関係だからｗ
-------------------------

NO.1補足のソース例はfirefox用の修正例ですか？
その例も、ブラウザによって解釈が違いますよ・・・

設計時やテスト時は、各ブロック要素に背景色を付けると良い。
NO.1補足のソース例を
一番簡単に尚且つ、IEでもその他のブラウザでも差異が無いようするなら（沢山あるが）

<div id="a">
<p><img src="○○.png" width="900" alt="*"></p>
<div id="a2">
<div id="b">　～説明文　～</div>
<div id="c">　～リンク　～</div>
<div id="a3"></div> <!-- 本来は空要素では無くコンテンツ -->
</div>
</div>

/* ■ CSS */
#a {
margin-right: auto;
margin-left: auto;
text-align: left;
width: 900px;
background-color: lime;
}

#a2{ margin: 0 0 0 10px; width:880px;}
#a3{ clear:both;}

#b {
float: right;
width: 635px;
height: 250px;
padding-top: 10px;
padding-bottom: 50px;
background-color: aqua;
}

#c {
float: left;
width: 245px;
height: 250px;
padding-top: 10px;
padding-bottom: 50px;
background-color: gray;
}


または、clearfixで差異は無い。

当然、HTML,DTDを標準モードにするように・・・