WindowsのSafariで【background】が効かない時の原因と対処方法
- 2016/09/11
- 2016/02/09
- トラブル
- background, css, ショートハンド
最近cssではショートハンドを使って記述するのが当たり前になってきたので（ショートハンドの詳細はこちら）、今回トラブルとなった【background】でも、普通にショートハンドで記述していました。ですが、いざクロスブラウザチェックをしてて『？？？』となったのが、WindowsのSafari(5.1.7)でした。
ちなみにもうAppleでは、Windows版のSafariを公式に配布はしていない（ダウンロードできない）んですね。という訳で、Windows版のSafariは[5.1.7]が最新（最終？）となるようです。（2016/2時点）
原因と対処方法
早速ですが、今回トラブルになった記述はこれです。
#WebDesign-ABC{
background: #ABCABC url(../images/Web-design-ABC.jpg) no-repeat fixed left top / 123px 456px;
}
普通に【background】のショートハンドで記述しただけです。（【background】のショートハンドの詳細はこちら）
原因
css3から採用された【background-size】をショートハンドで使った事が原因だったようです。ちなみに、いつものトラブルメーカー『Explorer』でも問題なかったので、今回WindowsのSafariで表示されなかったのには少々驚きました。。
対処方法
【background】のショートハンドから、【background-size】のみ分離させます。
#WebDesign-ABC{
background: #ABCABC url(../images/Web-design-ABC.jpg) no-repeat fixed left top;
background-image: 123px 456px;
}
これでOK!
なのですが、なんかしっくりきませんよね。。せっかくショートハンドで綺麗に書いてるのに、わざわざ分離させないとダメなんて。。
まとめ
Safariは上記でも書きましたように、もうAppleからは新しいバージョンは今の所出す予定なさそうなので、【background-size】を記述する必要があり、WindowsのSafariもきちんと対応したい方は、残念ながら今の所（2016/2現在）この書き方するしかなかそうです。
- ◀PREV
前の記事
- はてなブックマーク（はてぶ）でブックマークしたURLを、まとめて変更する方法！
- NEXT▶
次の記事
- お名前.com から脱出する！：ドメインの移管方法
関連記事
記事はありませんでした
