Javascript 在IE中显示较低的图像

我的按钮在Firefox、Safari和Chrome浏览器中都很好，但我在两台不同的Windows8.1电脑上测试的IE10除外。IE中的图像看起来有点低，而其他浏览器则正好在中间。

即：

火狐：

CSS:

HTML:

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

编辑：

删除了除结帐部分以外的所有css，但我仍然遇到问题。所以我认为这是签出css或HTML部分的问题

---

演示：

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

这些差异存在于边距、填充、边框和其他方面。 打开DevTools F12，您可以看到与input和input[type=submit]元素相关的所有规则

为了完全跨浏览器，您必须手动设置所有这些规则，以便在CSS中签出

更新： 也可能是您没有正确设置按钮的宽度和高度。 你现在的方式其实并不完美。正如您在屏幕截图中看到的，按钮的左/顶部有白色边缘，而右/底部没有

如果我把它改为宽度：186px；和高度：31px；，它是完美的。

---

如果运气好的话，也可以在Win8.1/IE10中修复您的问题，或者至少让问题变得不那么明显

在数小时的调试后找到了我的答案：

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

border: none;

---

我希望这能帮助别人

这可能是一个空白和/或填充的东西。演示：这很尴尬。。对我来说，它们与我在Win7上使用IE11完全相同。是的，我相信它可能与Windows 8.1相同。我用两台不同的计算机进行了测试。在我测试的Windows7计算机上，它似乎运行良好on@iheartbreakz-因为你对那个按钮很仔细；你现在的方式其实并不完美。正如您在屏幕截图中看到的，按钮的左/顶部有白色边缘，而右/底部没有。如果更改为宽度：186px；和高度：31px；，它是完美的。如果运气好的话，也可以在Win8.1/IE10中解决您的问题，或者至少让问题变得不那么明显

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

line-height: 29px;

border: none;