- ベストアンサー
IEとFirefoxでの背景表示の違いについて
- CSSを使用して背景の中央に画像を表示したいが、IEとFirefoxで表示の仕方に違いがある。
- IEではtext_areaの背景の中央に画像が表示されるが、Firefoxでは画面全体の中央に配置され、text_areaには一部欠けた画像が表示される。
- 改善策をアドバイスしていただきたい。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんな感じにすればかなりブラウザ間での差がなくなりますけど如何でしょうか？ 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>
その他の回答 (2)
＞教えて頂いた方法で、IE、Firefox、Netscapeとも同様の表示ができるようになりました。 Netscape と Firefox は元を辿れば同じものです。 微妙な違いが出る場合もあるんですが、基本的にはほとんど同じ表示状態となります。 確認するなら系統が全く異なる Opera も比較対象にしたほうが良いですよ。 http://jp.opera.com/ まぁ、私が提示した事例は Opera でも確認してから載せたんですけどね。 ＞IE以外のブラウザでは、テキストエリアに直接、背景指定するのではなく、背景用の要素に指定するという考えかたになるのでしょうか？不思議な感じですが、ブラウザごとの違いということでしょうか？ background-attachment:fixed; の解釈が分かれたため、背景用の要素に指定しました。 互換性に配慮すると要素を重ねて CSS を指定することはしばしばです。
お礼
度々、ありがとうございます。 アドバイスして頂いたように、Operaでも同様に表示できると確認できました。 ブラウザごとの解釈の違いについては、自力では解決できなかったと思います。これから学んでいきたいとおもいます。 詳しくご説明いただき、ありがとうございました。
div,p,form などブロックレベル要素の左右 margin を auto にすると非 IE 系ブラウザではセンタリングされます。 これは Web の正しい仕様であり、text-align:center; でセンタリングを行う IE の仕様は国際規格上誤りです。 http://www.mozilla.gr.jp/standards/webtips0004.html …というのは問題にされてないのかも？(^^; 画面をスクロールしたときに背景画像が動く・動かないも IE のほうに問題がありそうです。 とりあえず background-attachment:fixed; をはずせば同じような感じで表示されますよ。
お礼
ご回答、ありがとうございます。 説明が不明瞭で申しわけありません。 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; }
お礼
詳しいご回答、ありがとうございます！ 教えて頂いた方法で、IE、Firefox、Netscapeとも同様の表示ができるようになりました。 IE以外のブラウザでは、テキストエリアに直接、背景指定するのではなく、背景用の要素に指定するという考えかたになるのでしょうか？不思議な感じですが、ブラウザごとの違いということでしょうか？ 勉強になります。 ありがとうございました。