首頁 > 開發者 > JavaScript
【css】a:hover 設定上下邊框在 ie6 和 ie7 下失效，hoverie7
前段時間在寫樣式的時候發現了這個問題，雖然當時就解決了這個 bug 不過還是記錄下，以免再次出現這樣的問題。
demo 代碼：
<!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>
通過 demo 我們可以發現，在 ie6 和 ie7 瀏覽器中，滑鼠移上去上下邊框不顯示只有左右邊框顯示，而其他瀏覽器都是正常顯示，為什麼呢？
因為 a 標籤在 ie6 和 ie7 中 hasLayout 屬性為 false，至於何為 hasLayout？請百度，這裡我就不多說了。
既然知道了是 hasLayout 的問題，那麼只需要設定 hasLayout 就行了，設定的方法有很多，下面就列出常用的 2 種方法：
a:hover{position:relative;}a:hover{zoom:1;}
PS：
ie 下 80% 的 bug 都是由於元素沒有 hasLayout 所造成的，所以如果在 ie 下碰到難以解釋的問題，第一件事情要做的就是給該元素添加 hasLayout。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
