ページ内でリンクを貼る場合、
<a id=”#linktarget”>
<h2>ここに飛ばしたいコンテンツ</h2>
などとしていた方もいるだろう。
これは、<h2 id=#linktarget”>ここに飛ばしたいコンテンツ</h2>
と記述したほうがスマートだ。
さて、今回はこの<h2>にmargin-top:40px;を指定した時にアンカーリンクの位置がずれてしまうケースをメモしておく。
Google Chromeではページ内リンクの解釈が異なる
Firefoxではページ内リンクの40pxマージン計算に入れて位置を算出するが、Google Chromeではmarginが考慮されていない。それでページ内リンクのmarginを無視した位置に飛ばしてしまうのでだ。
解決策は至って単純、
<div id=#linktarget"> <h2>ここに飛ばしたいコンテンツ</h2>
上記のようにmarginを指定したい要素を、divで囲って、divにidをふれば解消される。