-1

我有一个简单的 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 为空白时不同？在值中留出那个空间对我来说就像是一个 hack 解决方案，但我已经尝试了所有明显的 css 修复程序，但仍然无法让它工作。非常感谢任何输入。谢谢！

4

1 回答 1

1

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

这里的关键是

vertical-align: text-top;

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

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

于 2013-05-24T23:45:31.800 回答