Javascript 在Firefox和IE中，向按钮添加填充会向下推其他按钮_Javascript_Html_Css_Firefox

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

javascript html css firefox

Javascript 在Firefox和IE中，向按钮添加填充会向下推其他按钮,javascript,html,css,firefox,Javascript,Html,Css,Firefox,我正在尝试设计一个简单的按钮，以匹配本地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 { backgro

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

似乎是按钮垂直对齐的问题。浏览器将按钮显示为“内联块”。添加“垂直对齐：顶部；”解决了这个问题

.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;
}

如果你不能在Fiddle中重现这个问题，那么你应该怀疑你的CSS的其余部分。你在使用重置吗？包括越来越多的代码，直到出现问题。我可以确认我已经将所有CSS代码放在JSFIDLE中，不，我没有使用重置。我想了解为什么我会有这种行为，而不是使用重置来解决问题。你是对的。当我将您的代码复制到引导文件并在Firefox中打开它时，我能够重现问题，但不能在Fiddle中重现。显然，在使用Fiddle时我们需要小心。btn:active的填充应更改为padding:0 1px 1px 0；它应该能在firefox上使用，并能在IE和Chrome上正常工作。似乎能做到这一点，但我不明白为什么会出现这种情况。你有什么想法吗？编辑了我的答案。这是因为浏览器将按钮显示为“内联块”。检查元素，单击“计算”并选中“浏览器样式”。谢谢，但我不知道内联块会导致元素移动？：s由于.btn和.btn:active中的填充，按钮向下移动一个像素。按钮的默认垂直对齐方式为“基线”，将其与其父按钮的基线对齐