Css 校准<；输入类型="；提交&燃气轮机；在Chrome中，如果值=&引用；

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

该按钮有背景图像，我想将其值设置为“”

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

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

这是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;
}

.提交按钮{
宽度：30px；
线高：30px；
背景：url（“”）；
}
.文本框{
线高：30px；
}
#电子邮件{
宽度：146px；
}

这是我的JSFIDLE：

---

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

看看下面，我更新你的小提琴

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

这应该做到：

这里的关键是

vertical-align: text-top;

似乎输入文本和输入图像元素有不同的基线（垂直对齐的默认设置），但有相同的文本顶行

---

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

设置

字体大小

按钮可能会有所帮助…在我看来，您应该使用

提交

按钮，如果您明确定义它的

高度

，这是我的第一个想法，但似乎并没有解决这个问题@汤姆：你说得对。为了语义正确性，我在自己的代码中做了更改。但同样的格式问题仍然适用。如果我将submit字段的值设置为空，它仍然会执行同样的操作。注意，这只是Chrome中的一个问题。我已经改变了一些CSS，请看一下，让我知道谢谢Ashish，但我不想要那些额外的元素和样式。我有一个非常具体的设计，我需要复制。我真的在努力更好地理解浏览器在这种情况下的行为，这样我就可以用尽可能少的额外标记来解决我的问题。谢谢你的解决方案和超详细的解释+1个很好的解决方案（

；）。