Safariでaタグのbackgroundの画像が表示されない//CSS
下のサンプルのようにCSSを設定したところ、aタグの通常の状態では背景画像が入りますが、ロールオーバー状態では画像が表示されません。
いろいろとググったところ、全角スペースの混入や@charsetを消すなど、どれを試しても相変わらずIEやFirefoxなどは問題ないのに、Safariのみうまくいきませんでした。
試しにa:hoverのbackgroundを背景色にすると、ちゃんと規定サイズの12×12pxの正方形に色がつきました。
結局は、ロールオーバー用の画像の"_"を一つとって、allow_r1.pngにしたところうまく表示されました。
Safariでは"_"の数に規定があるのか、ファイル名の長さに問題があるんでしょうか?それともSafariのバグ?
よくわかりませんが、ひとまず解決です。
こんなことで小一時間かかりました。
//このサンプルでは、Safariでロールーバー時に画像が表示されません。
いろいろとググったところ、全角スペースの混入や@charsetを消すなど、どれを試しても相変わらずIEやFirefoxなどは問題ないのに、Safariのみうまくいきませんでした。
試しにa:hoverのbackgroundを背景色にすると、ちゃんと規定サイズの12×12pxの正方形に色がつきました。
結局は、ロールオーバー用の画像の"_"を一つとって、allow_r1.pngにしたところうまく表示されました。
Safariでは"_"の数に規定があるのか、ファイル名の長さに問題があるんでしょうか?それともSafariのバグ?
よくわかりませんが、ひとまず解決です。
こんなことで小一時間かかりました。
//このサンプルでは、Safariでロールーバー時に画像が表示されません。
a .allow {
width: 12px;
height: 12px;
background:url(../images/allow_r.png);
}
a:hover .allow {
background:url(../images/allow_r_1.png);
}