2009年4月1日水曜日

ie6でページ内リンクが効かない


<a href="#hoge1">hoge1</a>
<a href="#hoge2">hoge2</a>
<a href="#hoge3">hoge3</a>
...
<a name="hoge1"></a>
hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 
hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 
hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 
hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 hoge1 
...
<a name="hoge2"></a>
hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 
hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 
hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 
hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 hoge2 
...
<a name="hoge3"></a>
hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 
hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 
hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 
hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 hoge3 


こういう感じのページ内リンクが、ie6でのみ効かないという状況に遭遇しました。

厳密にはhoge1だけが有効で、hoge2,3が効かない、という症状です。
ググってみたところ、やはりie6のバグみたいです。
とりあえず、aタグの中が空だとうまく動かないという記事があったので、それにならってaタグの中に要素を入れてみたところ、うまく動くようになりました。

1 件のコメント:

  1. ページ内リンクは aタグでアンカーを置かないで、idを振ってリンクさせるとよいですよ。本来の目的とは異なる aタグを使わなくてすみますし、ブラウザによってスクロール後の位置がずれることもありません。こんな感じです^^
    <a href="#Hoge1">ページ内リンク</a>
    <div id="Hoge1">
      <p>hoge1 hoge1 hoge1 hoge1 hoge1</p>
    </div>

    返信削除