サイトを制作している時、Chrome と Safari でスタイルがずれてしまうこと、ありませんか?

今回は、Safari のみスタイルを修正する方法を紹介します。

例えば、下の画像では、CSS で全く同じスタイルを指定しているのですが、『Powered by Azukipan』の位置がずれています。

Chrome

image2

Safari

image3

特に、position: absolute;の場合、ブラウザの環境により位置がずれることがあります。

その場合、以下のコードで Safari のみ異なるスタイルを指定することができます。

_::-webkit-full-page-media, _:future, :root クラス名 {
  スタイル名
}

試しに、『Powered by Azukipan』のスタイルを修正してみます。

.name {
  font-size: 8px;
  position: absolute;
  top: 204px;
  left: 250px;
}

さらに、Safari 用のコードを追加します。

_::-webkit-full-page-media,
_:future,
:root .name {
  top: 207px;
}

保存してみると、

image4

Chrome のスタイルは変わらず、Safari のみ『Powered by Azukipan』の位置を調整することができました。

Safari のスタイルがずれてお困りの方は、ぜひ試してみてください。

ブログ一覧