Question

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

按钮有一个背景图片，我想设置它的值=“”。

在Safari和Firefox中，如果我在元素上设置行高，则会保持对齐。

但是，在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属性中的文本以不同于值为空的方式计算对齐方式吗？将这个空间留在价值中对我来说就像是一个黑客解决方案，但我已经尝试了所有明显的css修复，仍然无法使其正常工作。任何输入都非常感谢。谢谢！

Answer 1

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

这里的关键是

vertical-align: text-top;

输入文本和输入图像元素似乎有不同的基线（vertical-align的默认设置），但是文本顶行相同。

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

Answer 2

看看下面的内容，我会更新你的小提琴。

`http://jsfiddle.net/EmCQJ/8/`

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

2 个答案: