[css] a:hover で設定した上下の境界線は、ie6 および ie7 では無効です_html/css

[css] a:hover で設定した上下の境界線は、ie6 および ie7 では無効です_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:48:21

オリジナル

1622 人が閲覧しました

少し前にスタイルを書いていたときにこの問題を発見しましたが、その時はバグは解決されましたが、このような問題が再び発生するのを避けるために記録しました。

デモコード:

<!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 を追加することです。