WindowsのSafariで【background】が効かない時の原因と対処方法

最近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現在)この書き方するしかなかそうです。

Google AdS



関連記事

RSSフィードを設置してすぐにエラーが…


恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…

記事を読む▷


Google Analyticsに設定する『グローバルIPアドレス』を確認&取得する方法


で「自分のアクセスを除外」するフィルタを設定し、自分のアクセスはカウントしないようにしていたのですが、ある修正作業をして…

記事を読む▷


公開日を最終更新日にする!サムネイル

検索結果に最終更新日を表示させてクリック率をアップする方法!新規投稿時には公開日を表示させる!


以前は検索結果で1ページ目上位3番目以内に半年以上表示されていた記事が、いきなり圏外となってしまいました。Googleの…

記事を読む▷


MySQL移行ツールにて移行

MySQL 5.5→5.7への移行手順:XSERVER(エックスサーバー)にて


数年ぶりに新規でワードプレスを使用したサイトを作ったのですが、MySQLのバージョン、5.7しか新規では追加できないよう…

記事を読む▷


SyntaxHighlighter Evolved のサムネイル

WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法


よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …

記事を読む▷


Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Google AdS

  • 人気の記事

    デザイン・撮影サービス

    3STARS DESIGN(スリースターズ デザイン) |デザインサービス 3STARS(スリースターズ)|スタジオサービス

新着記事

  • デザインサービス

    3STARS DESIGN(スリースターズ デザイン) |デザインサービス