2019/06/27

Chromeで効くのにSafariで崩れるーCSSハックで解決

 

パチパチとHTMLとCSSでデザインが出来上がり、すっきり!
確認作業に入ってみた。ChromではOK。念のためSafari でも…と、見てみたら…「えっ。。。なしてこんなことに(・・;)」というほど崩れている…ちょっと哀しい
一体何が起こっているのか?
念のためテーマエディターのstyleをテキストエディタにコピペしたり、スーパーリロード繰り返したり…治らない。
「師匠〜っ!何が何だかわかりません…。」

こういうことらしいです。

ブラウザによってはCSSのサポートの状況やバグによって表示の差異が出る

今回のようにChromeに対応していても、Safariではずれることがある。
私の場合、下のような画像を

.site_explanation2{padding:20px 80px 0px 80px; background:#8ab0bf; text-align:center; display:inline-block; vertical-align:central; }

という記述で背景をつけてChromeやFirefoxでは以下のように思い通りのものが見ることができたのだけれども、

paddings説明画像

Safariだと全くpaddingが効いてなく、当然背景もなく、ただ文字だけが表示されている状態でした。

こういう困りごとは、CSSハック

CSSハックという方法で解決するやり方があります。ハックって….ハッキングするの??とちょっと悪いイメージありますが…

ブラウザ別のCSSを適用し、表示の差異を生み出す原因を吸収させてどのブラウザでも極力同じように見えるようにする方法です。

私のサイトもこの方法で解決しましたが、これはちょっとした一時しのぎ的方法のようですね。なぜなら、ブラウザは次々と新しいものと置き換わっていき、需要が減ってしまったり、将来、新しいブラウザが登場した時に問題点が修正されるとそれ以前に通用していたCSSハックが逆に問題となることがあるみたいです。そういうときは、新しいCSSハックの記述に置換が必要になるようですね。

で、今回の問題を解決するためにSafari専用のCSSハックを適用。

_::-webkit-full-page-media, _:future, :root

という記述を追記:

_::-webkit-full-page-media, _:future, :root. site_explanation2{padding:20px 80px 0px 80px; background:#8ab0bf; text-align:center; display:inline-block; vertical-align:central; }

おぉ〜(o´∀`o)ぉ♪

Safariでも意図した通りに表示されました!スッキリです。

 

 

 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

Message

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