IEと火狐ではCSSでの表示方法が異なります。
現在ホームページはIEに合わせてCSSを組んでいるのですが、
知人から(火狐利用者)「ホームページの表示が変!」と指摘がありました。
そこで、ブラウザシェアを調べたら国内でIEが94%でダントツだと言うことが分かりました。
しかし、火狐を使ってる人も結構いるのが現実・・・
どちらか片方のブラウザに合わせてCSSをこのまま組んでいくのか、両者が快適に観覧できるようにJavaScriptなどでブラウザ毎にページとCSSを作って分散するのがいいのか・・・
後者だとページ数が増えるごとに作業量が2倍になるのですが・・・
企業用のホームページではないのでそこまでこだわる必要はないのでしょうか?
「こうしたらいいよ!」とか「こうすることであまり手間をかけずに解決できるよ!」とかみなさんの意見を教えていただけないでしょうか?よろしくお願いします。
No.1
- 回答日時:
んー?おかしいですね。
私も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;
}
********************************************************
しないと火狐では思った通りに表示されず
IEの場合は、id bとcの幅や高さ、背景カラーを指定しなくても表示されます。
こう書くのが普通とかもっと細かく書くべきだ!と言われてしまえばそれまでですが、
私の場合IEでしか今まで確認したことがなかったので戸惑ってしまいました。
ましてや趣味で運営しているので収入を得れるような技術すらありません。
No.2
- 回答日時:
あくまで個人の経験則ですがIEとFFでたしかにCSSの表示方法は同じですが
デフォルトの値が双方で違うことによる違いがでてくることはあるようです
つまりh1タグやpタグが指定しなくても最初から持っている上下のマージンや
liタグが持っている左側のパディングなどで表示が違ってくることがあるようです
表示が崩れている部分に注目して指定していない値も指定してみると直るかもしれません
No.3
- 回答日時:
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で書く事!
1、HTML,DTDを標準モードで作り、互換モードにしない事!
2、IE独自の仕様を使わない事!
3、旧IEのバージョン別に対策をする事。
(センター配置とか、フォントサイズなどなど・・・)
※ 他のブラウザは正しくレンダリングされるので、
IEだけ別のCSSへ分岐させたり、バージョン別ハックを使ったりします。
但し、HTML,CSSが正しい事が前提です。
回答としては、
何の為のウェブサイトですか?
自己満足ならそのまま放置で良いでしょう。
情報公開が目的ならFirefox,Chrome,Safari,Operaも無視できません。
(W3C基準に沿っているので崩れる可能性の方が低いですが)
No.4ベストアンサー
- 回答日時:
NO.3 naokitaです。
NO.3回答後に、NO.1さんの補足を見ました・・・floatの間違った解釈で、
質問者さんもIEも間違っています・・・
趣味か商用かは無関係だし、誰もが最初は初心者。
綺麗にしたいなら勉強すれば良いし、
時間が無い、面倒と思う人も居れば、それで妥協する人も居ます。
価値観の問題なので、その辺は自分の判断で好きにした方が良いです。
オリジナルな「物作り」って、スキル、費用、時間、満足or妥協の相互関係だからw
-------------------------
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を標準モードにするように・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【HTML&CSS】フッター下部の余...
-
<li>の黒い点を消したい。
-
CSS、width100%でもできる余白
-
CSSで指定した背景画像にリンク...
-
HTMLで文字が重なって表示されます
-
余分な縦スクロールバーが出て...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
CSSで背景画像を一番下にもって...
-
表示倍率を変えるとレイアウト...
-
CSS(0の単位)について
-
W3Cのソースコードの検証サービ...
-
画像と一緒にスライドするリン...
-
IE6にてliタグに対してposition...
-
横スクロールサイトの中央寄せ
-
画像イメージの上下左右、欲し...
-
ディスプレイのサイズに合わせ...
-
hpビルダー 複数の表の罫線を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報