ワードプレスCSSテーマ編集

Question

現在、ワードプレスのテーマの編集をしています。
SP版のヘッダーを上部に固定するために以下のコードを使ったのですが
クロームだときちんと高さを保って、bodyにも重ならず表示されるのですが
サファリだと高さは保っているのですが、どうしてもbodyが下に入り込んで重なってしまいます。

サファリだけに、bodyにヘッダー分のパディングを与えるなど、方法はあると思うのですが
初心者のため書き方がわかりません。どなたかお分かりの方、いらっしゃいますでしょうか？

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

header {
  position: fixed;/*ヘッダーを固定*/
  z-index: 10000;/*一番前に表示されるように設定*/
  top: 0;/*画面一番上で固定*/
  width: 100%;/*ヘッダーが横幅いっぱいになるように指定*/
  background-color: #ddd;/*背景色を指定*/
 }
	/*-- ここまで --*/
}

Answer 1

PC用、スマホ用（タブレット含む）の各ブラウザは、各要素のCSS定義を個別で持っていますので、「クロームでは良いが、サファリでは少しズレる」は、充分起こり得ます。

各ブラウザの差異（各要素の定義違い）を無くすために、CSSの「リセット」を掛ける必要があります。
「CSS　リセット」等で検索すると、いろいろ出てきますので、お好みを適用して、試してみてください。