1

我有这样的简单表格：

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

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

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

4

6 回答 6

1

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

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

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

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

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

于 2013-03-20T13:58:19.803 回答
1

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

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

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

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

工作小提琴

于 2013-03-20T14:00:53.777 回答
0

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

于 2013-03-20T13:57:18.327 回答
0

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

于 2013-03-20T13:57:25.957 回答
0

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

于 2013-03-20T13:58:03.907 回答
-1

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

于 2015-08-27T09:22:13.983 回答