Css 我的表的当前悬停列比其他列宽一点

我有一张桌子，在那里我在单元格上方的鼠标上设置了一种按钮。然后问题是，当我在列之间移动时，我们可以看到当前列比其他列宽一点。难以解释

下面是一段演示视频：

我们怎样才能避免呢

这是我的css

#MatrixTable td
{
    padding: 0px;
    height: 30px;
    text-align: center;
    vertical-align: middle;    
}

#MatrixTable:hover
{
    cursor: default;
}

#MatrixTable td a:hover
{
    cursor: none;
}

#MatrixTable td:first-child
{
    padding-left: 5px;
    text-align:left; 
}

#MatrixTable td a
{
    padding: 8px 10px;
    cursor: default;
}

谢谢

---

更新

---

这里有一个jsfiddle:

一般来说，这是因为添加新类时CSS发生了变化，添加了大量其他内容。造成大小更改的违规更改包括

填充

、

边框

和其他一些更改，它们将始终改变对象的大小

例如，如果您在mousover上添加了

.class:hover{border:500px solid#000；}

，则当您将鼠标悬停在该元素上时，该元素会变得更大。如果执行

.class:hover{padding:9999px；}

，也会出现类似的效果。明白我的意思了吗

我已经为您编辑了它，删除了会导致“恼人”大小更改的样式规则：

---

这不是你的全部CSS。要么是这样，要么就是JS也在起作用。如果可能的话，请在上发布所有相关代码和现场演示。我创建了一个JSFIDLE：这并不完全相同，但问题再次出现。我想避免鼠标悬停时要展开的列。谢谢。当你悬停按钮时，CSS会改变。我无法轻松阅读缩小的CSS，但基本上可以将CSS剥离到显示问题的最小代码段。我很确定这不是字体大小问题，就是填充/边距问题。@bronzan要检查一下吗