【クローム・サファリ】のアンカーリンクのズレ | WEBデザイナー 桑島 美夢

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

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

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

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

・chrome(クローム)
・Safari(サファリ)
・アンカーリンク(ページ内リンク)
+
・Fixed固定ナビゲーション
・ネガティブマージン仕込んだけどズレる
(ネガティブマージンはコレね。)
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 のズレも解決しました。

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

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

参考サイト
http://ez-sparrow.com/google-chrome%E3%81%A7%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%81%8C%E3%81%9A%E3%82%8C%E3%82%8B%E5%A0%B4%E5%90%88/