HP作成におけるブラウザについて（初心者です。）

質問

MAC(10.4.11)でHPをcssを使用して作成しています。
HP作成に伴い購入した本には
「FIRE FOX、safari、operaの三種類はブラウザは同じように標準規格に準拠しているため、どれか一つのブラウザで表示を確認すれば、大抵の他のブラウザでも表示が崩れることはありません。」
と書いてあったのですが、fire fox(ver.3.5.1)ではきれいに表示されるのにsafari(4.0.2)では微妙に崩れてしまいます。
どうしてでしょうか？？

また、IEは5.5しか持ってないのですがほとんど崩れて表示されます。
IEの場合はどのバージョンに合わせて作るのがベターなのでしょうか？

とっても困ってます。
どなたか教えてください！
よろしくお願いします！

回答No.2

jasko · ベストアンサー

ファイアーフォックスとIE８で動作確認をすれば問題ないです。
今のところなんだかんだいってもIEまたはソレをベースにしたタブブラウザが圧倒的なシェアを持っていますから。

ちなみにうちのHPの履歴によると
1 Internet Explorer 7.0 33.3%
2 Internet Explorer 6.0 26.6%
3 Firefox 3.0 13.3%
4 Internet Explorer 8.0 13.3%
5 Chrome 2.0 6.6%
6 Opera 9.6 6.6%
以上です。

お礼

ご回答ありがとうございます！
IEってまだそんなにシェアを持ってるんですね。
macユーザーは以前より増えたと思ってたので、safariはもっと普及してるのかと思いました。

回答No.3

noname#100277

基本的にはFirefox（FIRE FOXやfire fox、ファイヤーフォックスでは在りません！）とIEでの動作確認で良いでしょう。
MAC環境なのでIEは必然的に古いのは致し方在りません。
今はIE for MACは配布されてませんからね。
IEはHTMLやCSSにクセが在ってw3cの規格外と考えて差し支え在りません。
尚、当方のブラウザ一覧は以下ですが、全てのブラウザで動作確認を実施してます。

Windows Vista Home Premium SP1
VALUESTAR L VL300/T 4.00GB RAM
Intel(R)Core(TM)2 Duo CPU E7400@2.80GHz

Firefox2.0.0.20／3.0.12／3.5.1：
NetscapeNavigator9.0.0.6：
lolifox0.3.6：
SeaMonkey 1.1.17：
opera9.64(10487)：
safari4.0(530.17)：
google_chrome2.0.172.31：
sleipnir2.8.5(2805400)
Lunascape5.0.4

お礼

ご回答ありがとうございます！
やはり、IEとFirefox（ご指摘ありがとうございます）なんですね。
windows IEで確認できるよう、環境を整えてみます。
（個人的にはFirefoxのシェアがのびてほしいんですけどね。。。。）

回答No.1

dct18

CSSの解釈が違うから
IE7と8に合わせればいい

あとCSSは具体的な例を出してくれないと分からないんだけど
宣言してないとか、ボーダーエラーとかだと思うけど

補足

ご回答ありがとうございます！
宣言はしてるんですが、、、。

ヘッダーのレイアウト指定のところで、
　#header {
width: 100%;
height: 350px;
position: relative;
margin-bottom: 1em;
background: url(img/bg-header1.jpg) no-repeat 0 60px;
と、しています。

コンテンツは、「margin-bottom: 1em;」が反映されているのですが、
サイドバーは、トップ画像の直後から表示されます。
（ヘッダーはトップ画像とその下にグローバルナビゲーションがあります。）

サイドバー内の指定のところで、
　　/* -- サイドバー内の文字 -- */
　#sidebar p { margin-bottom: 2em; }

　　/* -- サイドバー内のタイトル -- */
　#sidebar .sidetitle {
　font-weight: bold;
　margin-bottom: 0;
　padding: 0.5em 0;
　color: #006699;
　background-color: #ffffff;
　border-bottom: 1px solid #006699;
　　}

以上を必要ないので、削除したからでしょうか？
（この次にはローカルナビゲーションがきます）

cssの具体例をあげたのですが、わかりづらかったらすみません。。。