图像在 IE 中显示较低答案

【问题标题】：Image appearing lower in IE图像在 IE 中显示较低
【发布时间】：2014-06-12 12:00:02
【问题描述】：

我的按钮在除 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 的东西。

编辑：

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

演示： link

【问题讨论】：

【解决方案1】：

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

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

border: none;

希望对其他人有所帮助！

【讨论】：

【解决方案2】：

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

这些差异体现在边距、填充、边框和天知道还有什么。
打开 DevTools (F12) 可以看到 input 和 input[type="submit"] 元素所涉及的所有规则。

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

更新：

也可能是您没有正确设置按钮的宽度和高度。
你现在拥有它的方式实际上并不完美。正如您在屏幕截图中所见，按钮的左侧/顶部有白边，而右侧/底部则没有。

如果我把它改成width:186px;和height:31px;，那就完美了。
（运气好的话也能解决你在 Win8.1/IE10 中的问题，或者至少让它不那么明显）

【讨论】：

这很尴尬.. 对我来说它们完全一样（不过我在 Win7 上使用的是 IE11）
是的，我相信它可能适用于 Windows 8.1。我用两台不同的电脑进行了测试。它似乎在我测试的 Windows 7 计算机上运行良好
@iheartbreakz - 因为你对那个按钮非常细致；你现在拥有它的方式实际上并不完美。正如您在屏幕截图中看到的那样，按钮的左侧/顶部有白边，而右侧/底部则没有。如果换成width:186px;和height:31px;就完美了。（运气好的话也可以解决你在 Win8.1/IE10 中的问题，或者至少让它不那么明显）