ホームページ >ウェブフロントエンド >htmlチュートリアル >[css] a:hover で設定した上下の境界線は、ie6 および ie7 では無効です_html/css_WEB-ITnose
[css] a:hover で設定した上下の境界線は、ie6 および ie7 では無効です_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:48:211666ブラウズ
少し前にスタイルを書いていたときにこの問題を発見しましたが、その時はバグは解決されましたが、このような問題が再び発生するのを避けるために記録しました。
デモ コード:
<!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 を追加することです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。