CSS <按钮> 重置 : Vertical Label Position?

Question

我想完全重置 button 的继承 CSS，使其表现得与任何其他内联 block 元素完全一样。但是，我遇到了一个问题，即按钮的文本永远卡在垂直居中位置。

在下面的 fiddle (和屏幕截图)中，button 和 div 根据 Chrome 开发者控制台具有完全相同的样式，但是按钮的文本是垂直居中的，而 div 不是:

http://jsfiddle.net/rgthree/vT3a7/

有人知道将完全重置按钮的属性或选择器，特别是包括其标签位置吗？

---

回答

在 Chrome ~25 以外的任何浏览器中都没有办法。我联系了 Chromium 元素，了解它在 Chrome 27 中不起作用(请参阅@winterblood 回答和评论)。他们是这样说的:

The issue is that we now use margin:auto on the anonymous block inside the button to do the centering inside the button in order to get safe-centering. So, unfortunately, there's no way to style it from CSS. That you were able to control this behavior before was really implementation detail leaking out.

所以，真正的答案是你不能在任何浏览器中设置它的样式，除了 Chrome ~25，其中 -webkit-box-align 被无意中暴露，正如@winterblood 回答的那样。

Answer 1

对于 webkit，您需要使用 baseline 或 start 的值覆盖 -webkit-box-align。

我还没有在 Firefox 中实现它(通过非常简短的观察)。