具有相同样式和内容的按钮和链接不对齐

Question

我正在尝试设置每个 button 和 a.btn 的样式，以便在所有浏览器中看起来都一样。使用以下样式，这 2 个元素在 Chrome 和 Firefox 中不会对齐。

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  height: 27.2px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;
}

<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

我尝试将vertical-align 更改为bottom，但虽然这确实将元素移动到更对齐的状态，但按钮本身的文本看起来仍然没有对齐（下面的演示）。

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  height: 27.2px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;

  vertical-align: bottom;
}

<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

如何让这两个元素在 Chrome 和 Firefox 中以相同的方式显示？

Answer 1

从规则中删除height 设置并仅使用padding参数微调高度：

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;
}

<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

Answer 2

Chrome 和 Firefox 都使用不同的渲染引擎来显示 html（Chrome 使用 Blink，Firefox 使用 Gecko）。不同的浏览器使用不同的渲染引擎，所以我认为它在所有浏览器中看起来并不完全相同。