Question

我有这样简单的表：

<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/

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

有人可以解释，为什么会发生这种情况以及如何解决这个问题？

Answer 1

不是使用粗体属性来突出显示元素，而是使用不同颜色的当前悬停链接 - 这样，您就不会遇到这些问题！

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

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

请记住，制作大胆的内容会使渲染的尺寸变大，这是首选的方法。

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

Answer 2

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

因此，请将以下属性提供给a标记，以解决问题。

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

将td的固定宽度设为waste，因为如果其内部的内容增加，则td宽度也会增加，尽管已为其分配固定宽度。

Working Fiddle

Answer 3

这种情况正在发生，因为粗体字体比普通字体宽。尝试将文本居中并使单元格稍宽。

Answer 4

更大胆的文字=更大的文字......这不是一个错误，这是一个明显的特征尝试强制你的td的宽度（当然使用CSS），使它们的宽度不依赖于它的文本宽度...

Answer 5

当文字变为粗体时，它的宽度会增加。因为单元格环绕文本，文本现在变宽，单元格变宽以适应这种情况。修复方法是使用较浅的字体，并在悬停时使其变暗。

文字移动大胆悬停

5 个答案: