香川県のWEBデザイナー桑島です。
仕事(コーディング)で「う~ん…うまくいかないなぁ」と悩んで
こういう方法があるのかぁ!と発見したコトをブログに書いています。
大したコトでなくとも、ひょっと同じようなコトで
引っかかり、悩んでいる方のヒントや解決の糸口になればいいなぁと。
さて今回は下記のような場合にお試しいただきたい方法です。
・chrome(クローム)
・Safari(サファリ)
・アンカーリンク(ページ内リンク)
+
・Fixed固定ナビゲーション
・ネガティブマージン仕込んだけどズレる
padding-top: 〇〇px;
margin-top: -〇〇px;
Mozilla Firefox、IEはきちんとアンカーリンクで狙い通りに移動できるのに
chrome、Safariはどうしてもズレる。そんな時です。
通常アンカーリンクのリンク移動先は
<a name=”link01″ id=”link01″></a>
<h2>タイトルです。</h2>
普通は↑みたいに書くと思います。
特に、chromeは name=”〇〇〇” もきちんと書いておく方が良い。
コレで大抵は大丈夫なんです。
でも、なんでだかきちんと狙ったとおりに移動せずズレる場合はコレ!!!
<p name=”link01″ id=”link01″> </p>
<h2>タイトルです。</h2>
<P>は<div>でもいいみたい。
コーダーとては…余計な<p>や<div>は美しさに欠けるというか
少しモヤモヤするのですが…いつか時代が解決してくれるだろう…
ブラウザー開発者様に期待!!!ってコトにします。
どうやら、
Google Chromeは ページ内リンクのマージン計算に入れて位置を
算出していない様子らしいデス。
Safariもそれっぽくて、コレでアンカーリンクを設定したら
ちなみに今回この方法で ios のズレも解決しました。
どんな言葉で書いたら、必要な方に
キーワードとして拾っていただき、解決方法のきっかけになるだろう。
ちょっと今回はそんなコトを考えました。
まさに!どんぴしゃり!ローーーーーン!!
みたいでなくとも、何かのお役に立ちますように~♪