CSS定位按钮与空文本

Question

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

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

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 ?? -->

请参阅fiddle

Answer 1

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

JSFiddle Demo

<强> CSS

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