アンカータグはid
やname
という属性を持っている.wbdv.html
に<a id="web" name="dev">
と書くと,wbdv.html#web
やwbdv.html#dev
というURIでアンカータグをtop
とするリンクがはれる.
しかし,ブラウザによっては何回かリンクを踏むと毎回ずれた位置に飛んだり,固定ヘッダー分のmargin-top
を設定しても無効になってしまうことが起こる.これはなぜなのか.
実は,インライン要素にページ内リンクのid
を振っても,ブラウザによっては定まった位置に決まらないのである.なのでa[id="web"]{display: block;}
とするなど,一度ブロック要素にすることで,毎回同じ位置にページ内リンクが決まる.
これはすべてのインライン要素に当てはまる.ページ内リンクはアンカーでなくてもspan
やbr
でも機能するが,ブロック要素にすることでほとんどのHTML要素にはれるようになる.