IE中的图像显得较低

Question

我的按钮在所有浏览器（Firefox，Safari，Chrome）中看起来都很好，除了IE 10（我在两台不同的计算机上使用Windows 8.1测试过）。 IE中的图像似乎略低，而其他浏览器则在中间。

IE：

火狐：

CSS：

#checkout {
    background-image: url(../img/checkout.jpg);
    border: 1px solid #D6D6D6;
    float: right;
    width: 184px;
    height: 29px;
}

HTML：

<input type='submit' id='checkout' class='jcart-button' value='' />

我尝试过使用：

line-height: 29px;

另外，我注意到当我使用input type='image'时它工作正常，但问题是，我需要能够在悬停时拥有不同的图像。 onMouseClick可以做到这一点，但没有javascript就行不通。我需要一些没有javascript的东西。

修改

删除了除#checkout部分以外的所有CSS，但我仍遇到问题。所以我认为这是#checkout css或H​​TML部分的问题。

演示： link

Answer 1

这可能是因为所有浏览器对输入元素都有完全不同的用户代理设置。

这些差异存在于边距，填充，边界和上帝知道还有什么 打开DevTools（F12），您可以看到input和input[type="submit"]元素所涉及的所有规则。

绝对是跨浏览器 - 确保您必须在CSS中为#checkout手动设置所有这些规则。

---

<强>更新

也可能是您未正确设置按钮的宽度和高度 你现在拥有它的方式实际上并不完美。正如您在屏幕截图中看到的那样，按钮的左侧/顶部有白色边缘，右侧/下侧没有。

如果我将其更改为width:186px;和height:31px;，那就完美了 （运气也可以解决你在Win8.1 / IE10中的问题，或者至少使它不那么明显）

Answer 2

经过数小时的调试后找到了答案：）

我所要做的就是从图像中删除边框并使用：

border: none;

我希望能帮助别人！