Question

我尝试设置一个简单的按钮，以匹配原生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但是小提琴不能在Firefox中重现问题，也不能在Edge中重现。

Answer 1

似乎是按钮垂直对齐的问题。浏览器将按钮显示为＆＃39; inline-block＆＃39;。添加＆＃39; vertical-align：top;＆＃39;解决了这个问题。

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

添加填充到按钮会在Firefox和IE中按下其他按钮

1 个答案: