IE8 li 菜单在鼠标悬停时跳转答案

【问题标题】：IE8 li menu is jumping on mouseoverIE8 li 菜单在鼠标悬停时跳转
【发布时间】：2010-12-22 15:36:59
【问题描述】：

我对仅在 IE8 中的菜单有一个大问题 - 所有其他浏览器都可以正常工作：

有一个像这样的菜单：

<ul>  
<li><a href="link.html">Point 1</a></li>  
<li><a href="link2.html">Point 2</a></li> 
</ul>

CSS 就是这个：

ul li { padding-left: 23px; line-height: 29px; }

ul li:hover, 
ul li.active { background: url(../images/bg_arrow_blue.png) no-repeat top left; }

ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; }

ul li a:hover, 
ul li a.active { border-bottom: 1px solid red; }

所以现在 - 在 IE 8 中我遇到了问题，在鼠标悬停时链接会在鼠标悬停时上下跳跃，因为我认为是边框底部。所有其他浏览器都可以正确地使用边框底部并且没有跳转。

我google了很多，没有找到解决办法。

希望这里的任何人都可以提供帮助！

非常感谢。

萨沙

【问题讨论】：

我在使用 RDP 时遇到了完全相同的问题，当我从本地浏览到该页面时一切正常，一整天的搜索发现一切正常，这是一个 RDP UI 问题

标签： internet-explorer-8 hover mouseover html-lists

【解决方案1】：

好的，

对于任何感兴趣的人 - 我有解决方案：

ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; padding-bottom: 1px; }

我只需要添加一个“padding-bottom: 1px;”到“ul li a”声明。

圣诞快乐。

【讨论】：