悬停时菜单文本移动[重复]答案

【问题标题】：Menu text moves on hover [duplicate]悬停时菜单文本移动[重复]
【发布时间】：2013-07-30 05:03:26
【问题描述】：

当我将鼠标悬停在文本上时，文本会移动。文本移动的原因是我删除了悬停时的粗体效果。如何停止文本在悬停时移动？

#menu li a{
    color:#595959;
    font-size:14px;
    font-weight:bold;
    position: relative; 
    overflow:hidden;
    padding:2px 5px;
}

#menu li a:hover{
    color:#FFFFFF;  
    font-weight:normal;
    background-color:#e11d3b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    text-decoration:none;   
}

【问题讨论】：

你能把导航栏的html和所有的css贴出来吗？
你在包含它们的 li 上设置了宽度/高度吗？
你能创建一个 jsfiddle 来显示问题吗？
等宽字体？ jsfiddle.net/Y3Pwa/1（实际上，文本在 Firefox 中仍然抖动）。和你的设计师谈谈。说服他/她粗体字更好。

标签： css

【解决方案1】：

将此添加到您的 CSS #menu li a:hover{padding:2px 5px 2px 6px;}

Demo

【讨论】：

【解决方案2】：

好吧，通过缩短不加粗体，从数学上看，文本似乎会移动，因为它不再具有相同的大小...... 通过这样做：

#menu li a{
    color:#595959;
    font-size:14px;
    font-weight:bold;
    position: relative; 
    overflow:hidden;
    padding:2px 5px;
    font-size: 25px;
    display: block;
    width: 180px;
    text-align:center;
}

#menu li a:hover{
    color:#FFFFFF;  
    font-weight:normal;
    background-color:#e11d3b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

您为链接设置宽度，以及显示类型块（例如，它的行为类似于 div）。这样，您可以添加一个 text-align: center;这将最大限度地减少文本移动的印象。

【讨论】：

我不能给 li 宽度。菜单文本有不同的大小。
对于字体大小，只是为了提高文本的大小，使问题更清晰。

【解决方案3】：

似乎唯一可以避免这种情况的方法是将width 设置为固定。（每个li 元素）

如果没有，bold 将始终移动您的文本..

【讨论】：