ページ内リンクがちゃんと飛ばない(092)
内容が多くて長くなるページによく使われるページ内リンクですが、先日、表示して欲しい位置に設定しているのに、意図しない変な場所に移動してしまうトラブルに見まわれました。いろいろと調べてブラウザバグも疑いましたが、結局はHTMLの組み方が文法的に間違っていたミスでした。情けないですぅ(T_T)。何年、この仕事やってんだぁ?
原因は、同じブロック内に複数の<a id="***" name="***"></a>を置いたことによるミス
一つの<div>や<p>のブロックレベルの中に複数の<a id="***" name="***"></a>を置いてしまうのがNGでした。もちろん、id属性とname属性の値はそれぞれ変えていましたが、そういう問題ではないようです。具体的には下記の状態になっていました。
<div id="base">
<a id="111" name="111"></a>
<div id="contents111">
コンテンツ111
</div>
<a id="222" name="222"></a>
<div id="contents222">
コンテンツ222
</div>
</div>
<div id="base">から見ると、<a>の中にはid="111"とid="222"の2つがあることになります。この状態がよろしくないのです。
正しくは、ページ内リンクを設定したいそれぞれの<div id="contents***">の中に<a id="***" name="***"></a>を置きます。こうすると、どの<div id="contents***">に飛んでいけばいいのか明確になり、正しく移動するようになります。
<div id="base">
<div id="content111">
<a id="111" name="111"></a>
コンテンツ111
</div>
<div id="content222">
<a id="222" name="222"></a>
コンテンツ222
</div>
</div>
IE6には<br />を使った便利なバグ(?)あり
今回の問題解決を図るにあたって、ネット検索をしたらすぐに出てきたのが、IE6の場合、<a id="***" name="***"></a>の直前に<br />を置くと、その位置にちゃんと飛ぶようになる、というもの。
<div id="base">
<br />
<a id="111" name="111"></a>
<div id="content111">
コンテンツ111
</div>
</div>
でもこれはIE6にしか効果がないバグ(?)のようなので、今後は使わないようにした方がいいですね。これは動作確認しまして、IE6はOKでしたが、IE7とFirefoxでは移動しませんでした。
謝辞
この問題解決は、会社のHTMLコーディング技術者がやってくれました。ありがとうKさん!これからも助けてね。今度、ランチをおごろう。