タイトルの通りです。iPhone版Safariで、キャッシュを削除した最初のアクセスで、英字だけ右側にズレて表示され、リロードすると中央寄せになります。text-alignに他の値を指定して表示ズレが起きている箇所は見つかりませんでした。
コードは以下のような記述です。
HTML
<h1> <div class="en">PRIVACY POLICY</div> <div class="ja">個人情報利用規約</div> </h1>
CSS
.sans { //BODY要素にかかっているfont-family font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; } .en { font-family: Century Gothic, "Century Gothic", "Muli", sans-serif; } h1 { margin-bottom: 30px; opacity: 0; text-align: center; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; -moz-animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; -ms-animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; -o-animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } h1 .en { margin-bottom: 12px; font-weight: bold; text-indent: 0.2em; letter-spacing: 0.2em; } h1 .ja { color: #444; text-indent: 0.1em; letter-spacing: 0.1em; } @media (min-width: 769px) { h1 .en { font-size: 2.4rem; } h1 .ja { font-size: 1.2rem; } } @media (max-width: 768px) { h1 .en { font-size: 2rem; } h1 .ja { font-size: 1rem; } }
回答3件
あなたの回答
tips
プレビュー