0

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

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

比较FF/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;
}
4

1 回答 1

0

每个浏览器都以不同的方式呈现文本，因为您没有设置heightbut only font-size，因此按钮的高度将根据操作系统和该浏览器的呈现引擎而有所不同。

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

于 2013-10-23T09:56:14.213 回答