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

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/