如果 value=""，Chrome 中 <input type="submit"> 的对齐方式会发生变化

Question

我有一个简单的 HTML 表单，只有两个元素——一个文本框和一个提交按钮——需要水平对齐。

按钮有背景图片，我想设置它的值=""。

在 Safari 和 Firefox 中，如果我在元素上设置 line-height，则保持对齐。

然而，在 Chrome 中，这还不够。我必须设置 value=" " （注意空格），或者给它另一个文本值。否则，元素会移动。

这是 HTML 和 css

<form>
    <input type="text" id="email" class="textBox" />
    <input type="submit" id="submitSubscribe" class="submitButton" value="" />
</form>

.submitButton{
    width:30px;
    line-height:30px;
    background:url('');
}

.textBox{
    line-height:30px;
}

#email{
    width:146px;
}

这是我的 jsfiddle： http://jsfiddle.net/EmCQJ/5/

有人知道为什么 Chrome 计算对齐方式与 value 属性中的文本与 value 为空时不同吗？在 value 中留出空间对我来说就像是一个 hack 解决方案，但我已经尝试了所有明显的 css 修复程序，但仍然无法让它工作。非常感谢任何输入。谢谢！

Answer 1

应该这样做：http://jsfiddle.net/EmCQJ/38/

这里的关键是

vertical-align: text-top;

似乎 input-text 和 input-image 元素具有不同的基线（垂直对齐的默认设置）但相同的 text-top line。

您应该手动设置输入文本元素的边距、内边距和边框，因为不同的浏览器有不同的默认值。执行此操作时，请记住高度是元素的大小减去边距、填充和边框，因此如果您希望总高度为 30 像素，请确保从顶部减去 1 像素，从底部减去 1 像素，从而得到 28 像素的 CSS 高度。