少し前にスタイルを書いていたときにこの問題を発見しましたが、その時はバグは解決されましたが、このような問題が再び発生するのを避けるために記録しました。
デモ コード:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>a:hover 设置上下边框在 ie6 和 ie7 下失效</title> <style> a{text-decoration:none;} a:hover{color:#f00;border:2px solid orange;} </style></head><body> <a href="javascript:;">a:hover 设置上下边框在 ie6 和 ie7 下失效</a></body></html>デモを通じて、ie6 および ie7 ブラウザーでは、マウスを上に移動すると、上下の境界線が表示されず、左右の境界線のみが表示されることがわかります。他のブラウザでは正常に表示されるのですが、なぜですか?
ie6やie7ではaタグのhasLayout属性がfalseなので、hasLayoutとは何でしょうか？百度さん、お願いします、ここでは多くは言いません。
hasLayout に問題があることがわかったので、あとは hasLayout を設定するだけです。一般的に使用される 2 つの方法があります:
つまり 80% です。バグは解決されました これは要素に hasLayout がないことが原因なので、IE で不可解な問題が発生した場合、最初に行うことは要素に hasLayout を追加することです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
