html - 按钮图像排列交叉浏览器顶部的文本？

Question

我已经为手头的问题设置了一个快速的 jsfiddle。

http://jsfiddle.net/Gdnbe/

如果您扩大结果窗格，您会注意到所有内容都是内联的。

当我在 Firefox 中查看它时，一切似乎都正确排列（按钮图像高度比输入长，但应该垂直居中），包括文本“登录”。

然而，在 chrome 中，它会将按钮文本移动到按钮的底部，并且按钮与输入的内联效果不佳，它太高了。

有问题的代码：

<input name="submit" value="Log in" style="background: url(' http://www..../images/btn-bg.png') no-repeat scroll 0 0 transparent;
    border: none;
    /*border-radius: 0.4em 0.4em 0.4em 0.4em;*/
    color: #999999;
    padding: 0.7em 0.8em 1.1em;
    margin-left: 20px;
    height: 35px;
    width: 146px;
    cursor:pointer;
    color:#fff;" type="submit">

使这个跨浏览器兼容的下一步是什么？

Answer 1

问题是按钮上的填充。删除它，问题就消失了。

http://jsfiddle.net/Gdnbe/1/

Just look at the fiddle (stupid "Links to jsfiddle must be accompanied by code" rule)

如果您想坚持使用背景图像，这是您可以做的最好的事情。如果您想让所有元素完美排列，请考虑使用 CSS3 中的一些好东西：

• 边界半径
• 线性梯度
• 盒子阴影