在 Firefox 和 IE 中向按钮添加填充会向下推动其他按钮答案

【问题标题】：Adding padding to button pushes other buttons down in Firefox and IE在 Firefox 和 IE 中向按钮添加填充会向下推动其他按钮
【发布时间】：2016-03-25 16:51:49
【问题描述】：

我正在尝试设计一个简单的按钮以匹配原生 Windows 按钮的外观。

这在 Chrome 中确实有效，但在 FireFox 或 Edge (IE) 中运行时，会出现一些奇怪的行为：

查看以下css：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

#OfficeUI {
  font-size: 11px;
  font-family: "Segoe UI", "Open Sans";
}

.btn {
  background-color: #E1E1E1;
  border: 1px solid #ADADAD;
  color: #444;
  font-family: "Segoe UI", "Open Sans";
  font-size: 11px;
  height: 22px;
  min-width: 74px;
  padding: 0 1px 1px 0;
}
.btn:focus {
  outline: none;
}

.btn:hover {
  background-color: #E5F1FB;
  border-color: #0078D7;
  border-width: 1px;
}

.btn:active {
  background-color: #CCE4F7;
  padding: 0;
}

.btn-default {
  border-color: #0078D7;
  border-width: 2px;
}

和下面的Html：

<body>
  <div id="OfficeUI">
      <button type="button" class="btn btn-default">
        Ok
      </button>

      <button type="button" class="btn">
        Ok
      </button>
  </div>
</body>

因此，按钮通常是样式化的，当您按下按钮时，测试会向下移动 1px 并向右移动 1px，以产生一种按下效果。

但是，当在 FireFox 中执行时，第二个按钮向下移动了一个像素，这怎么可能？

我附上了fiddle，但 fiddle 无法在 Firefox 和 Edge 中重现该问题。

【问题讨论】：

如果你不能在 Fiddle 中重现问题，那么你应该怀疑你的 CSS 的其余部分。你在使用重置吗？包含越来越多的代码，直到 Fiddle 中断。
我可以确认我已经将我所有的 CSS 代码都放在了 JsFiddle 中，而且我没有使用重置。我想了解为什么我会出现这种行为，而不是使用重置来解决问题。
你是对的。当我将您的代码复制到引导文件并在 Firefox 中打开它时，我能够重现该问题，但不能在 Fiddle 中重现。
所以显然我们在使用小提琴时需要小心。
.btn:active 的填充应更改为 padding: 0 1px 1px 0;它应该可以为 firefox 解决问题，并且可以在 IE 和 Chrome 中正常工作。

标签： javascript html css firefox

【解决方案1】：

按钮的垂直对齐似乎有问题。浏览器将按钮显示为“inline-block”。添加“垂直对齐：顶部；”解决问题。

.btn {
      vertical-align: top;
      background-color: #E1E1E1;
      border: 1px solid #ADADAD;
      color: #444;
      font-family: "Segoe UI", "Open Sans";
      font-size: 11px;
      height: 22px;
      min-width: 74px;
      padding: 0 1px 1px 0;
}

https://jsfiddle.net/7gdfr2qk/7/

【讨论】：

似乎可以解决问题，但是，我不明白为什么会发生这种行为。你有什么想法吗？
编辑了我的答案。这是因为您的浏览器将按钮显示为“inline-block”。检查元素，点击“计算”并检查“浏览器样式”。
谢谢，但我不知道 Inline-Block 会导致元素移动？ :s
按钮向下移动一个像素，因为 .btn 和 .btn:active 中有填充。按钮的默认垂直对齐为“基线”，将它们与其父级的基线对齐