javascript - 图像在 IE 中显示较低

Question

我的按钮在除 IE 10 之外的所有浏览器(Firefox、Safari、Chrome)中看起来都很好(我在装有 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 或 HTML 部分的问题。

演示: link

Answer 1

经过数小时的调试后找到了我的答案:)

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

border: none;

希望对其他人有所帮助!