html - 为什么没有文本的按钮有不同的垂直对齐方式？

Question

我有以下要自定义的表单。

<form>
    <input type="text" value="" />
    <button></button>
</form>

我希望按钮有背景图片但没有文字。

问题是当我不向其中写入任何文本时，按钮会失去垂直对齐方式。

有人可以解释这种行为吗？

input {
    width: 200px;
    height: 20px;
    border: 1px solid #0066cc;
    border-radius: 20px;
    padding: 0;
}

button {
    margin-left: -30px;
    background-color: white;
    background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    width: 19px;
    height: 19px;
    padding: 0;
}

<form>
    <input type="text" value="" />
    <button></button>
</form>

<form>
    <input type="text" value="" />
    <button>Some text</button>
</form>

Answer 1

因为它们有一个默认的 vertical-align 属性 baseline，它根据元素内容(文本)的底部对齐内联元素。

如果没有内容，则垂直对齐不能基于它，而是基于元素的底部。

您可以使用不间断空格或更改垂直对齐方式来解决此问题。

<form>
    <input type="text" value="" />
    <button>&nbsp;</button>
</form>

JSFiddle

-- 或者 --

button {
    margin-left: -30px;
    background-color: white;
    background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    width: 19px;
    height: 19px;
    padding: 0;
    vertical-align:middle;
}

JSFiddle

好书:

• > All you need to know about vertical-align - Christopher Aue