IE8：HTML 按钮元素周围的奇怪边框答案

【问题标题】：IE8: weird border around HTML button elementIE8：HTML 按钮元素周围的奇怪边框
【发布时间】：2013-11-01 12:50:33
【问题描述】：

我有一个带有自定义背景（图像+颜色）且没有边框的按钮元素，除了 2px 边框底部（和一堆其他属性 -- 代码如下）在 Firefox 和 IE8 中呈现完全不同。问题是，这是一家使用 IE8 作为其唯一浏览器的公司的作品，因此按钮在 IE8 中呈现良好的效果很重要。

这是两者之间的视觉比较：

我的问题不是关于填充差异（我正在调查），而是关于 IE8 上可见的奇怪边框除了常规边框（边框底部）。

谁能向我解释它的来源以及如何摆脱它？
提前致谢。

这是 HTML 代码：

<button class="btn" id="c_edit">
    <span>Annuler</span>
</button>

这是 CSS：

.btn {
    display: inline-block;
    margin: 0 0 7px 5px;
    padding: 0;
    color: #ddd;
    font-size: 14px;
    font-family: FrutigerLTStd55Roman, sans-serif;
    text-decoration: none;  
    border: none;
    border-bottom: 2px solid #222;
    background-color: #999;
    background-image: url('img/btn_bg.gif');
    background-position: 0 bottom;
    background-repeat: repeat-x;
    cursor: pointer;
    transition: all .5s ease-out;
}
.btn span {
    display: inline-block;
    margin: 0;
    padding: 8px 10px 6px 40px;
    background-color: transparent;
    background-position: 4px 0;
    background-repeat: no-repeat;
}

【问题讨论】：

等等。这应该做什么？ border-bottom: 2px solid #222;
你能确认你正在使用的文档类型吗？还要检查 IE8 使用什么渲染模式——使用 F12 打开开发工具来检查。
另外，您是否使用了任何类型的 CSS 重置或规范化器？
@mavrosxristoforos：它应该在底部添加一个两个像素的边框。您可以在图像上看到这一点（尽管几乎没有因为背景本身很暗）。我有其他颜色的类似按钮，它更明显。
@Spudley：文档类型是标准的 HTML5 文档类型。没有 CSS 重置或规范化器。至于渲染模式，很遗憾我暂时无法访问我客户的计算机（上图来自他发给我的截图），但下次我问他时我会记住这一点。您可能已经扩展了该主题吗？有哪些可能的情况和可用的修复方法？

标签： html css button internet-explorer-8

【解决方案1】：

每个浏览器呈现文本的方式都不同，因为您没有设置height，而只设置了font-size，因此按钮的高度会因操作系统和浏览器的呈现引擎而异。

要解决此问题，请为按钮提供与图像相同的height，或者如果要裁剪它，则将其缩小。

【讨论】：

如果可能的话——你能给我们提供一个 jsFiddle 来玩吗？然后，我们可以为您链接一个可以解决您的问题的更新版本。