前段時間在寫樣式的時候發現了這個問題，雖然當時就解決了這個 bug 不過還是記錄下，以免再次出現這樣的問題。通過 demo 我們可以發現，在 ie6 和 ie7 浏覽器中，滑鼠移上去上下邊框不顯示隻有左右邊框顯示，而其他浏覽器都是正常顯示，為什麼呢？因為 a 标簽在 ie6 和 ie7 中 hasLayout 屬性為 false，至于何為 hasLayout？請百度，這裡我就不多說了。
前段時間在寫樣式的時候發現了這個問題，雖然當時就解決了這個 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。
![軟體測試——faul，error&failure 與 Pie模型[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)