Question

我已经设置了一个关于手头问题的快速解决方案。

如果您扩展结果窗格，您会发现所有内容都是内联的。

当我在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的一些好东西：

边界半径
线性梯度
箱阴影

按钮图像阵容交叉广告顶部的文字？

1 个答案: