IEとFirefoxでの背景表示の違いについて　（CSS）

解決済

質問者：kinkan71
質問日時：2006/05/28 01:40
回答数：3件

いつもお世話になっています。

CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。
#text_areaに指定した内容を.contentsに書き写しても同じ状態です。
改善策をアドバイスして頂けないでしょうか？
よろしくお願いいたします。

【html】
<body>
<div class="contents">
<div id="text_area">あああああ・・・</div>
</div>
</body>

【css】
.contents{
width:760px;
height:540px;
margin:0px;
margin-right:auto;
margin-left:auto;
padding:0px;
border:0px;
}
#text_area{
overflow:auto;
width:600px;
height:395px;
margin-top:30px;
margin-left:auto;
margin-right:auto;
background-image: url(haikei.gif);/* サイズ：456×392PX */
background-repeat: no-repeat;
background-position:center;
background-attachment:fixed;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#19206
回答日時：2006/05/29 23:51

こんな感じにすればかなりブラウザ間での差がなくなりますけど如何でしょうか？

IE を基準にしながら大雑把にやっておりますので細かい部分は適宜。

.contents{
width:760px;
height:540px;
margin:0px;
padding:0px;
border:0px;
}
.hoge{
margin-top:30px;
width:600px;
height:400px;
background-image: url(haikei.gif);/* サイズ：456×392PX */
background-repeat: no-repeat;
background-position:50% 42%;
}
#text_area {
overflow:auto;
width:600px;
height:395px;
}

<body>
<div class="contents">
<div class="hoge">
<div id="text_area">あああああ・・・</div>
</div>
</div>
</body>

- 0
- 件

通報する

この回答へのお礼

詳しいご回答、ありがとうございます！

教えて頂いた方法で、IE、Firefox、Netscapeとも同様の表示ができるようになりました。
IE以外のブラウザでは、テキストエリアに直接、背景指定するのではなく、背景用の要素に指定するという考えかたになるのでしょうか？不思議な感じですが、ブラウザごとの違いということでしょうか？

勉強になります。
ありがとうございました。

通報する

お礼日時：2006/05/30 21:59

No.3

回答者： noname#19206
回答日時：2006/05/31 00:45

＞教えて頂いた方法で、IE、Firefox、Netscapeとも同様の表示ができるようになりました。

Netscape と Firefox は元を辿れば同じものです。
微妙な違いが出る場合もあるんですが、基本的にはほとんど同じ表示状態となります。
確認するなら系統が全く異なる Opera も比較対象にしたほうが良いですよ。
http://jp.opera.com/

まぁ、私が提示した事例は Opera でも確認してから載せたんですけどね。

＞IE以外のブラウザでは、テキストエリアに直接、背景指定するのではなく、背景用の要素に指定するという考えかたになるのでしょうか？不思議な感じですが、ブラウザごとの違いということでしょうか？
background-attachment:fixed; の解釈が分かれたため、背景用の要素に指定しました。
互換性に配慮すると要素を重ねて CSS を指定することはしばしばです。

- 0
- 件

通報する

この回答へのお礼

度々、ありがとうございます。

アドバイスして頂いたように、Operaでも同様に表示できると確認できました。

ブラウザごとの解釈の違いについては、自力では解決できなかったと思います。これから学んでいきたいとおもいます。
詳しくご説明いただき、ありがとうございました。

通報する

お礼日時：2006/05/31 14:10

No.1

回答者： noname#19206
回答日時：2006/05/28 17:37

div,p,form などブロックレベル要素の左右 margin を auto にすると非 IE 系ブラウザではセンタリングされます。

これは Web の正しい仕様であり、text-align:center; でセンタリングを行う IE の仕様は国際規格上誤りです。
http://www.mozilla.gr.jp/standards/webtips0004.h …
…というのは問題にされてないのかも？(^^;

画面をスクロールしたときに背景画像が動く・動かないも IE のほうに問題がありそうです。
とりあえず background-attachment:fixed; をはずせば同じような感じで表示されますよ。

- 0
- 件

通報する

この回答へのお礼

ご回答、ありがとうございます。
説明が不明瞭で申しわけありません。

IE、Firefoxともに、スクロールしてもtext_areaの背景は固定表示されるのですが、その位置がFirefoxだと中央よりも左下方向にずれてしまうのです（そのため、画像の一部が枠外にはみ出し、表示されません）。
ご指摘いただいたように"background-attachment:fixed;"を外したところ、Firefoxでは中央に固定表示できるようになりましたが、逆にIEではテキストと一緒にスクロールしてしまいます。

現在は、 "background-attachment:fixed;"とした上で、表示位置を%で指定していますが、"50% 50%"とするとFirefoxでは、y方向が下に進みすぎてしまうため、画面を見ながら微調整しています。これはきっと正しい指定方法ではないですよね？

【CSS変更点】
#text_area{
overflow:auto;
width:600px;
height:400px;
margin-top:30px;
margin-left:auto;
margin-right:auto;
background-image: url(haikei.gif);/* サイズ：456×392PX */
background-repeat: no-repeat;
background-position:50% 42%;
background-attachment:fixed;
}