kawama.jp

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

カテゴリ: 技術関連 — タグ: , — 2009年4月1日 11:31 — Comments (1)hatebu count


<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>

    コメント by むぎちゃ — 2009年6月22日 @ 21:10

RSS feed for comments on this post. TrackBack URL

Leave a comment

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress