だれかのなにかに役立てるウェブ制作者YoTaの趣味ブログ

Microsoft Edgeのエラー!htmlの要素aをマウスホバーした時に近接するhrが膨らむ現象について

今日は新ブラウザであるMicrosoft Edgeのエラーについて、記事にします。

htmlとcssによる構築時の注意点です。

htmlのaタグ要素をマウスホバーした時に近接するhrが膨らむ現象について

a要素に近接するhr要素

a要素はblock要素にしています。hrはただの線です。
Microsoft Edgeのエラー1

a要素をマウスホバー

a要素をマウスホバー。hoverで背景の色を変えてますが、変えなくてもエラーは起きます。
Microsoft Edgeのエラー2

hr要素が膨らむ

マウスホバーから離れると、図のように、hr要素が少し膨らみます。太くなるという表現のほうが適切かもしれません。
Microsoft Edgeのエラー3

hr要素をやめてcss側でborderにすればOK

hyタグを廃止。css側でa要素にborderを直接指定すれば問題解消しました。
Microsoft Edgeのエラー4

まとめ

Microsoft Edgeでは、マウスホバーした時の挙動が他のブラウザと解釈が少し異なるようです。とくに、link,visited,hover,activeに関してはきちんと指定してあげないと、変な動作をしたりすることが多いです。

とはいえ、構築のルールにのっとっていれば、問題はないので、ちゃんと構築するようにしましょう。
IEに比べれば、ぜんぜん可愛いもんですね。

ページ上部に戻る