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

看到fiddle

Answer 1

按钮元素，我相信inline默认情况下，所以你需要垂直对齐他们

JSFiddle Demo

CSS

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