在盘旋的边界在弄乱标准宽度/高度的桌元素

Question

我有一个表（日历）并且在每个td元素上都有一个CSS悬停。我在这个悬停上放了一个边框，但它会弄乱单元格的宽度和高度（即新边框会将下一行稍微向下推，等等。）

有什么方法吗？

Answer 1

您可以通过在所有td元素上使用与td背景颜色相同的边框来处理，并且只更改边框的颜色（而不是宽度）以获得与您最初设计的非常相似的效果弄乱宽度和高度。

原始边框对用户不可见，因为它的颜色与背景匹配。

Answer 2

你可以（如果悬停没有通过过渡平滑）在盒子上有一个填充（比如5px），在悬停时你可以添加2px的边框并使填充3px，所以它仍然是5px距离盒子末端的距离。

Answer 3

CSS因此而臭名昭着，因为“border”属性未添加到对象的总高度中。它表现得像边缘。您可以做的是为您的＆lt; td＆gt;添加一些保证金规则。 CSS文件中的选择器：

td.hoverable {
  border:1px solid #00F;
  margin:-1px;
}

因此，当您悬停时，新的“边距”规则也会生效，从而减少＆lt; td＆gt;的面积。通过1px，这应该允许边框显示。

编辑：哎呀，是的。我的意思是margin:-1px; :)谢谢！