粗体悬停时的文本移动答案

【问题标题】：Text shifting on bold hover粗体悬停时的文本移动
【发布时间】：2018-11-26 22:17:44
【问题描述】：

我有这样的简单表格：

<table border="1">
<tr>
    <td>title1</td>
    <td>title2</td>
    <td>title3</td>
</tr>
<tr>
   <td><a href="#">item1_1</a></td>
   <td><a href="#">item1_1</a></td>
   <td><a href="#">item1_1</a></td>
</tr>
<tr>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
</tr>
<tr>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
</tr>
</table>

结合我的 CSS，结果将是： http://jsfiddle.net/yzsfH/

如您所见，将鼠标悬停在表格上时，表格内的超链接会“移动”。当然，这种运动是一种不需要的效果，我想摆脱它。我搜索了一些，但没有找到任何令人满意的东西。

有人可以解释一下，为什么会发生这种情况以及如何解决它？

【问题讨论】：

它不动。粗体文本使用更多宽度来呈现。
@LinusCaldwell 我无法 +2 你的评论。

标签： html css html-table

【解决方案1】：

不要使用粗体属性来突出显示元素，正确的方法是为当前悬停的链接赋予不同的颜色 - 这样就不会出现此类问题！

只需删除粗体属性并将颜色更改为不同的颜色，如下所示：

a:hover 
{ 
  text-decoration:none; 
  color:#000000;
}

请记住，加粗会使渲染的尺寸更大，这是通常首选的方法。

这是一个有效的 jsFiddle - http://jsfiddle.net/yzsfH/5/

【讨论】：

@seph 没问题！很高兴它有帮助！
如果它起作用，它只是偶然起作用，因为默认字体大小恰好大于 14px，以至于粗体不会增加宽度。这很狡猾，它结合了（可能的）字体大小变化和字体粗细变化，即将一个可疑的鼠标悬停效果与另一个可疑的鼠标悬停效果结合在一起。鼠标悬停时突出显示的正常方法是更改颜色。
@JukkaK.Korpela 你说得对，我知道在这种情况下它会起作用，但通常这不是最好的方法。我会用这个新的小提琴更新我的答案，正如你提到的那样，这是一种更好的方法 - jsfiddle.net/yzsfH/5
感谢您的更新，我决定保留正常的高亮显示 - 只是在鼠标悬停时更改颜色。谢谢你的小提琴：]

【解决方案2】：

您可能知道，宽度在增加是因为文本大小在增加。（粗体字）

因此，将以下属性赋予a 标签即可解决问题。

a{
  display:block;
  width:55px;  /* give fixed width here */
}

给td 提供固定宽度是waste，因为如果其中的内容增加，那么td 宽度也会增加，即使它被分配了固定宽度。

Working Fiddle

【讨论】：

【解决方案3】：

这是因为粗体字体比普通字体宽。尝试使您的文本居中并使单元格稍微宽一些。

【讨论】：

【解决方案4】：

加粗文本 = 加粗文本...这不是错误，而是明显的功能尝试强制您的 td 的宽度（当然使用 CSS），以便它们的宽度不依赖于其中文本的宽度...

【讨论】：

【解决方案5】：

当文本变为粗体时，其宽度会增加。因为单元格环绕文本，并且文本现在更宽，所以单元格变得更宽以适应这一点。解决方法是使用较浅的字体，在悬停时使其变暗。

【讨论】：

【解决方案6】：

解决这个问题给出修复宽度：50px;

【讨论】：