空文本按钮的CSS位置

Question

我有一个风格的三个简单的HTML按钮height- min-width-和border。一个带文本，第二个带非制动空间，最后一个带空文本。

我的问题是在浏览器视图上，带有空文本的最后一个按钮在不同的位置打印。

CSS：

.test {
    height: 27px;
    border: 1px solid #b4b1ff;
    min-width: 54px;
}

HTML：

<button class="test">Text</button>      <!-- with text -->
<button class="test">&nbsp;</button>    <!-- with Non Breaking Space -->
<button class="test"></button>          <!-- Empty ?? -->

看小提琴

Answer 1

我相信按钮元素是inline默认设置，因此您需要将它们垂直对齐

JSFiddle演示

的CSS

body { margin: 0; padding: 0; }
.test {
    height: 27px;
    border: 1px solid #b4b1ff;
    vertical-align: top;
}