html - 按钮悬停更改其他元素的位置

Question

我创建了一些具有悬停和事件效果的简单按钮，它们工作得很好。当一行中有多个按钮时，悬停/单击按钮不会造成问题。然而，当一行中只有一个按钮时，将鼠标悬停在它上面或单击它会导致其他元素移动它们的位置。我试过使用 margin-top 和只是 top 定位，但同样的问题发生了。这发生在 Chrome 中。

这是我的设置:

HTML:

<button>NO</button><button>PROBLEM</button><br />
<button>PROBLEM</button><br />
<button>NO</button><button>PROBLEM</button>

CSS:

body {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;
}

button {
  position: relative;
  border-width: 0 1px 4px 1px;
  border-color: #d9372e;
  border-style: solid;
  background-color: #ff4136;
  padding: 8px 12px 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: #fff;
  outline: none;
}

button:hover {
  top: 1px;
  border-bottom-width: 3px;
}

button:active {
  top: 2px;
  border-bottom-width: 2px;
}

编辑:JSFiddle

Answer 1

按钮的 outerHeight 在 :hover/:active 上发生变化，当您在按钮上应用边距和边框宽度时，另一个按钮必须以某种方式进行补偿，因为它们更小。

无论如何，要解决您的问题，请在悬停/事件样式上应用 margin-bottom 来平衡 outerHeight(或底部到 4px 总计)，就像这样:

button:hover {
 top: 1px;
 border-bottom-width: 3px;
 margin-bottom:1px;
}

button:active {
 top: 2px;
 border-bottom-width: 2px;
 margin-bottom:2px;
}

示例:http://jsfiddle.net/p6ohgy5n/2/