IE9以前でアンカーリンク(ページ内リンク)が効かない!
古いIEでアンカーリンクが効かないという事は、残念ながらよく起こります。(笑)
まぁ、いろいろありまして、よくある解決としては
●アンカーリンクの中身が空(何も入っていない)と飛ばない。
→何か入れる、もしくは何か入っている要素にIDを設定し直す
●なぜかアンカーリンク(...)の前に
タグを入れると飛ぶようになる。
とかね。
一般的な方法はGoogle先生で出てきます。
だがしかし、今回遭遇した現象は前例を見つけることができず、自力で解決しました。
その現象とは、「マイナスのマージンが付いている要素を飛び先にすると、アンカーが効かない」というもの。
うーむ。
まぁ、マイナスのマージンなんて使わない方が良いとは思っています。
が、そこはそれ、大人の事情で使っちゃったよテヘみたいな場合もあるのです。
その要素をアンカーリンクの飛び先にした場合、IE9以前で無効になるようです。
対応としては、今回は下記のように書き換えました。
(元)
margin-left:-10px;
(書き換え)
position:relative;
left:-10px;
ということで。
これで表示を維持してアンカーリンクも効くようになりました。
が、場合によってはこういう置き換えができずにちょっと大きく構成を変える必要がでてくる可能性もあるよねー。
いやいや、ハマッた、ハマッた。
まぁ、いろいろありまして、よくある解決としては
●アンカーリンクの中身が空(何も入っていない)と飛ばない。
→何か入れる、もしくは何か入っている要素にIDを設定し直す
●なぜかアンカーリンク(...)の前に
タグを入れると飛ぶようになる。
とかね。
一般的な方法はGoogle先生で出てきます。
だがしかし、今回遭遇した現象は前例を見つけることができず、自力で解決しました。
その現象とは、「マイナスのマージンが付いている要素を飛び先にすると、アンカーが効かない」というもの。
うーむ。
まぁ、マイナスのマージンなんて使わない方が良いとは思っています。
が、そこはそれ、大人の事情で使っちゃったよテヘみたいな場合もあるのです。
その要素をアンカーリンクの飛び先にした場合、IE9以前で無効になるようです。
対応としては、今回は下記のように書き換えました。
(元)
margin-left:-10px;
(書き換え)
position:relative;
left:-10px;
ということで。
これで表示を維持してアンカーリンクも効くようになりました。
が、場合によってはこういう置き換えができずにちょっと大きく構成を変える必要がでてくる可能性もあるよねー。
いやいや、ハマッた、ハマッた。
コメント