1

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

这是一个小演示视频：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/

4

1 回答 1

0

嗯，最常见的原因是当你添加新类时 CSS 发生了变化，添加了很多其他的东西。造成大小变化的有问题的变化是padding和border其他一些，它们总是会改变对象的大小。

例如，如果您在鼠标悬停上添加.class:hover{border: 500px solid #000;}，当您将鼠标悬停在该元素上时，该元素会变得更大。如果你这样做了，也会发生类似的效果.class:hover{padding:9999px;}。看看我在这里得到什么？

我已经为您编辑了它，删除了会造成“烦人”大小变化的样式规则：

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

于 2012-05-23T20:57:35.507 回答