昨日、自作のWordpressテーマの表示がSafariだけおかしいという不具合報告をいただきました。
で調べてみたら、以下のような感じで、どうやら不具合はSafariだけのようでした。
- Chrome→OK
- Firefox→OK
- IE→OK
- Opera→OK
- Safari→NG
それで、CSSハックでSafariだけに適用されるスタイルを設定しようと思ったのですが、日本語では思ったように見つかりませんでした。
バージョンの古いものなら結構あったのですが、適用してもうまく反映しなかったり、ChromeとSafari抱き合わせのCSSハックだったり。
それで、英語サイトも探してみたら、以下のページで見つけることができました。
is there a css hack for safari only NOT chrome? – Stack Overflow
以下がSafariのみに適用されるスタイルの記述方法です。
/*Safariだけに適用されるCSSハック*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, .css_selector {
background-color: LightSkyBlue;
}
}とりあえず僕は、Windows環境しか持っていないのでWindows版Safari5.1.7（追記：現在は配布終了）では動作確認しました。
その他の以下のブラウザで、上記のスタイルが適用されないのも確認しました。
- Chrome37.0
- Firefox32.01
- Opera24.0
- Internet Explorer11.0
もし、Safariだけ表示がおかしいという場合は、試してみてください。
