<button> 究竟是如何被浏览器渲染的？答案

【问题标题】：How exactly is a <button> rendered by a browser?<button> 究竟是如何被浏览器渲染的？
【发布时间】：2015-07-05 13:23:53
【问题描述】：

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

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

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

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

谁能告诉我<button> 究竟是如何被浏览器渲染的？

【问题讨论】：

【解决方案1】：

你打算这样做吗？

HTML

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

CSS

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

小提琴链接：Fiddle

【讨论】：