浏览器呈现的<button>到底是怎样的？

Question

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

相同的样式意味着两者具有相同的显示，填充，行高，文本对齐和垂直对齐。但是，只要我将代码从<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