Safariでのひどいレイアウト崩れ

質問

現在WEBサイトのコーディングを行っています。

WINDOWSで作業、IEとFirefoxで確認という形で作業をおこなっていました。
今日たまたまMacにふれる機会があり、Safariで作業中のサイトを確認してみると、ひどいレイアウト崩れがおこっていました。

とくに、background-imageの表示のされ方がひどいです。
しらべてみると、Safariではbackground-imageで指定した画像が、領域よりも大きいと、はみ出てしまったりしてしまうそうでした。

これは何か回避方法はないのでしょうか？
CSSスプライトでコーディングを行っているため、背景画像として使う画像は基本的に指定する領域よりもおおきくなってしまいます。

背景画像を指定している領域では全てがはみでたり、ずれたりで、本当にひどいことになってしまっています。

初歩的なことかも知れませんが、回避方法をご存知の方がいらっしゃいましたら、おしえていただけないでしょうか？

よろしくお願いします。

回答No.3

ayustar · ベストアンサー

Apple自身のサイトがCSS Spritesを使ってますから、何か回避策(?)はあるはずですよね。
overflow:hidden; は指定していますか？
背景画像なので関係ないかもしれませんが。
あんまり参考にならない回答ですみません。

お礼

>Apple自身のサイトがCSS Spritesを使ってますから、

盲点でした！
確認しました。本当ですね。
絶対何か回避法はありますね。

＞overflow:hidden;
やってみたのですが、これはだめでした・・・。

どうやらbackgroundpositionの解釈がちがうのかしら？
とおもえてきました。

ありがとうございました。

回答No.2

noname#106515

バグの例として挙がっているページをWindows版Safari4.03で見たら、
ちゃんと見えました。4で治ったのでしょうか? それとも、Windows版
だから?

それはさておき、どこにも回避方法は載ってませんね。というか、
「回避方法：なし」と明言しているところも・・・
これは、CSSスプライトを止めるしかないのでは。

#1さんの回答に反論することになりますが、Macユーザーを無視する
のでない限りSafariは無視するべきではないと思います。
(実は、質問者さんには失礼ながら、私にとっての本題はココ)

Cromeを使っているユーザーは、他人が設定したパソコンを使っている
場合を除き、自分で意識してインストールしています。なので、
おかしな表示になれば、他のブラウザ(WindowsならIE、MacならSafari
等)で試してくれます。

それに対して、MacのSafariユーザーは最初から入っているものを
意識することなく使っている人が多いです。ブラウザに選択肢がある
ことを知らない、それどころか「ブラウザって何?」レベルの人も
多いでしょう。そんな人たちは、表示がおかしなサイトは、壊れた
サイトと見なして二度と訪れてくれなくなります。

お礼

そうなんですよね。
Safariが少なくなったとは言え、Macの標準装備ですものね。。。

SafariのWindows版だと問題なく見えるのです。

＞これは、CSSスプライトを止めるしかないのでは。
やっぱりそうですよね（泣）
かなりページ数があって、今から修正となると、画像作成からやり直しになってしまって。。。あぁ。やっかいです。
回避法なし、って結構どのサイトにも書いてあったので、
もし知っている方がいれば・・・と思ったのですが。

はじめから気づいていれば。
自分の非力を感じます。

ご回答ありがとうございました。

回答No.1

yyr446

回避方法の回答とは違いますが、
ブラウザーにおけるSafariのシェアーって、
http://www.yomiuri.co.jp/net/news/cnet/20091216-OYT8T00534.htm
によると、今日現在、約4%ぐらいですね。Chromeにも抜かれたみたい。
もっとも、MACのユーザーも少なくなってますけど。
この際、無視するのも一つの解決策かと。

Webページ作成者が企画に沿わないブラウザーを無視しつづければ、
ブラウザーの自然淘汰が進むなんて事はありえないけど...

お礼

ご回答ありがとうございました。
とても参考になりました。

どこまで対応するかっていうのは、本当に難しい問題ですよね・・・；