html - 如何关闭 <button> 内容的自动垂直对齐？

Question

有没有办法关闭这个功能？ <button>的内容始终垂直居中，这与常规 HTML 标记中发生的情况相反。

演示:http://jsfiddle.net/HbqnR/

我要<button>表现得像<a> ，文本位于按钮的左上角。

我正在寻找特定于 WebKit 的修复程序，也许有一些 -webkit-*控制此行为的 css 属性。 欢迎破解，但不要使用额外的标记!

提前谢谢你:)

---

.button
{
    display:inline-block;
    height:200px;
    border:4px gainsboro outset;
    background:silver;
    vertical-align:middle;
    padding:20px;
    box-sizing:border-box;
    text-decoration:none;
    width:200px;
    text-align:left;
}

<button class="button">&lt;button&gt;</button>
<a href="http://www.google.com" class="button">&lt;a&gt;</a>

Answer 1

添加这个:

button:before {
    content:'';
    display:block;
    margin-top:-50%;
}

参见 http://jsfiddle.net/r6yXw/

而且，如果您希望它仅适用于基于 webkit 的浏览器，请将其包装在

@media screen and (-webkit-min-device-pixel-ratio:0) { ... }

参见 http://jsfiddle.net/r6yXw/1/