マンガでよめる痔のこと・薬のこと

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

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

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

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

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

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

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

Apple自身のサイトがCSS Spritesを使ってますから、何か回避策(?)はあるはずですよね。


overflow:hidden; は指定していますか?
背景画像なので関係ないかもしれませんが。
あんまり参考にならない回答ですみません。
    • good
    • 0
この回答へのお礼

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

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

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

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

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

お礼日時:2009/12/17 12:56

バグの例として挙がっているページをWindows版Safari4.03で見たら、


ちゃんと見えました。4で治ったのでしょうか? それとも、Windows版
だから?

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

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

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

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

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

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

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

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

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

お礼日時:2009/12/17 11:24

回避方法の回答とは違いますが、


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

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

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

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

お礼日時:2009/12/17 11:18

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QcssレイアウトでSafariだけがどうしても崩れます

こんばんわ、いつもお世話になっております。少しまえにも同じような感じで質問させていただいたのですが、
あれからなんとかいろいろなブラウザで修正をして見れるようになったのですが、
どうしてもSafariだけがレイアウトがひどくくずれてしまいます。
どこを直したらいいのかわからない状態でして、もし何かヒントがありましたら教えていただけますでしょうか?
だいたいの感じですが、floatを使用してる部分が(普通はちゃんと左右にレイアウトされる部分が上下にずれている、、)おかしいのですが
何を修正すればいいのかわかりません、。
よろしくお願いいたします。

Aベストアンサー

CSSで指定しているidをどんな要素に当てたのか書いて下さらなかったので^^;
適当な画像と文章を当てはめて表示させましたけど、

>普通はちゃんと左右にレイアウトされる部分が上下にずれている

という感じではありませんでしたが?
#wrapper~imgで指定されているのが画像だとして、#wrapper~ulが説明文の段落のidだとするときちんと左右にレイアウトされて表示されます。

手持ちのFirefox1.5.0.4、Netscape7.2、Opera9.0、IE5.2.3、Safari2.0.4(最新版のSafariになります)で特にレイアウトに違いはありませんから、この記述に問題は無いようですが・・・・。

ちなみにOSに残ってるOpera7.53お試し版で表示させたら見事に上下にずっこけたのでそんな感じの事なんでしょうかね?

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qsafariだけcssが反映されない

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="base.css" type="text/css" media="screen,print" />
<title>あ</title>
</head>
<body>

</body>
</html>


このhtmlはbase.css(以下)を読み込んでいます。
/* CSS Document */
@charset "Shift_JIS";
body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
}

fire fox、operaでは背景画像images/bg.jpgが
表示されていますが、safariでは真っ白です。

index.html内に
<style type="text/css">
<!--
body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
}
-->
</style>
と記述してしまえば、safariでも当然のように反映されていますが、
これが外部ファイルになると反映されません。

今回の例は、おかしい部分を抽出してみたのですが、
bodyの背景が表示されない、一番上に10pxくらいの空白(マージン?
)が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。

floatを使ったページはsafariでは背景が表示されないと
いう情報を得て、検査するために抽出してゆき、最後には
こんなにシンプルになっても障害がとりのぞけないので、
どんな見落としがあるのか、教えて頂けないでしょうか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="base.css" type="text/css" media="screen,print" />
<title>あ</title>
</head>
<body>

</body>
</html>


このhtmlはb...続きを読む

Aベストアンサー

試して見たけど最初は再現できなかった。

で、もしやと思って
> /* CSS Document */
このコメントの部分もCSSファイルに書いたら再現しました。

@charset は先頭に書かなければ行けないので
コメントも書いちゃだめなんでしょう。
コメントか@charsetのどちらか消してください。

参考URL:http://winmac.exblog.jp/4963334/

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


人気Q&Aランキング