在Firefox和IE中，向按钮添加填充可以向下推其他按钮

Adding padding to button pushes other buttons down in Firefox and IE

本文关键字：按钮 添加 填充 下推 其他 可以向 Firefox IE      更新时间：2023-09-26

我正在尝试设计一个简单按钮的样式，以匹配本机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中重现这个问题。

按钮的垂直对齐似乎有问题。浏览器将按钮显示为"内联块"。添加"垂直对齐：顶部；"修复了问题。

.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/

相关文章：