css - 浏览器究竟是如何渲染一个 <button> 的？

Question

为什么 <button>始终使其文本垂直对齐但不是..比如说，使用相同样式的 anchor 标记？

相同的样式 意味着两者具有相同的显示、填充、行高、文本对齐和垂直对齐。但是一旦我将标签从 <button> 更改为至 <a> , 它中断了，文本不再垂直对齐

这很难弄清楚。我什至去检查 webkit-core 来寻找答案。我检查了 <button> 是什么元素已经复制出来了。 http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

这个人说 <button>风格不同，但如何？ Button's text vertical align

谁能告诉我 <button> 到底是多少？由浏览器呈现？

Answer 1

你想要这样的东西吗？

HTML

<button>...</button>
<br>
<a>...</a>

CSS

button {
    -webkit-appearance: button;
}
a {
    padding: 2px 8px;
    -webkit-appearance: button; 
}

fiddle 链接:Fiddle