【クローム・サファリ】のアンカーリンクのズレ

香川県のWEBデザイナー桑島です。
仕事（コーディング）で「う~ん…うまくいかないなぁ」と悩んで
こういう方法があるのかぁ！と発見したコトをブログに書いています。

大したコトでなくとも、ひょっと同じようなコトで
引っかかり、悩んでいる方のヒントや解決の糸口になればいいなぁと。

さて今回は下記のような場合にお試しいただきたい方法です。

（ネガティブマージンはコレね。）
padding-top: 〇〇px;
margin-top: -〇〇px;

Mozilla Firefox、IEはきちんとアンカーリンクで狙い通りに移動できるのに
chrome、Safariはどうしてもズレる。そんな時です。

通常アンカーリンクのリンク移動先は

普通のアンカーリンクの書き方（ × chrome、Safariダメな例）

<a name=”link01″ id=”link01″></a>
<h2>タイトルです。</h2>

普通は↑みたいに書くと思います。
特に、chromeは　name=”〇〇〇”　もきちんと書いておく方が良い。
コレで大抵は大丈夫なんです。
でも、なんでだかきちんと狙ったとおりに移動せずズレる場合はコレ！！！

アンカーリンクを書き方（〇 chrome、SafariOKな例）

<p name=”link01″ id=”link01″> </p>
<h2>タイトルです。</h2>

<P>は<div>でもいいみたい。
コーダーとては…余計な<p>や<div>は美しさに欠けるというか
少しモヤモヤするのですが…いつか時代が解決してくれるだろう…
ブラウザー開発者様に期待！！！ってコトにします。

どうやら、
Google　Chromeは　ページ内リンクのマージン計算に入れて位置を
算出していない様子らしいデス。

Safariもそれっぽくて、コレでアンカーリンクを設定したら
ちなみに今回この方法で ios のズレも解決しました。

どんな言葉で書いたら、必要な方に
キーワードとして拾っていただき、解決方法のきっかけになるだろう。
ちょっと今回はそんなコトを考えました。

まさに！どんぴしゃり！ローーーーーン！！
みたいでなくとも、何かのお役に立ちますように~♪