Safariでaタグのbackgroundの画像が表示されない//CSS

下のサンプルのようにCSSを設定したところ、aタグの通常の状態では背景画像が入りますが、ロールオーバー状態では画像が表示されません。
いろいろとググったところ、全角スペースの混入や@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);
}

Bookmark and Share


ブックマークに追加