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

web制作

※この記事は、作成日より一年以上が経過しています。最新の情報ではありませんので、ご注意ください。

読了の目安時間: 13

こんにちは、キヨタツです。

今日は新ブラウザである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に比べれば、ぜんぜん可愛いもんですね。

今読んだ記事をシェアする

thumb_css

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

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。