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

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

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

Answer 2

从规则中删除 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>

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

Buttons & links with same styles and content don't line up

css

button

hyperlink

vertical-alignment