Question

我有一个表格，我在鼠标悬停单元格上设置了一种按钮。然后问题是当我在列之间移动时，我们可以看到当前列比其他列宽一点。很难解释。

以下是一段示范视频：http://screencast.com/t/WbHIlSHim

我们如何避免它？

这是我的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：http://jsfiddle.net/Q35f7/

Answer 1

嗯，大多数情况下，这是因为当您添加新类时，CSS会发生变化，并添加了许多其他内容。创建大小更改的违规更改包括padding，border和其他一些更改，这些更改将始终更改对象的大小。

例如，如果你在mousover上添加了.class:hover{border: 500px solid #000;}，当你在它上面盘旋时，那个元素会变得更大。如果你.class:hover{padding:9999px;}，会发生类似的效果。看看我在这里得到了什么？

我已经编辑了它，因为你删除了会导致“烦人”尺寸变化的样式规则：

http://jsfiddle.net/Q35f7/1/

我桌子上当前悬停的柱子比其他柱子略宽

1 个答案: