Question

昨天我向a question in Stackoverflow询问了Firefox中的边距/填充问题。我得到了答案并接受了。今天我发现我的问题没有解决。所以，我发布了一个新问题。

CSS：

.btn {
    text-align: center;
    color: #333;
    font-weight: 700;
    font-size: 11px;
    font-family: tahoma, verdana, arial, helvetica;
    background: -webkit-linear-gradient(#fefefe, #e7e7e7);
    background: -o-linear-gradient(#fefefe, #e7e7e7);
    background: -moz-linear-gradient(#fefefe, #e7e7e7);
    background: linear-gradient(#fefefe, #e7e7e7);
    height: 24px;
    width: auto;
    overflow: visible;
    border: 1px solid #c4c4c4;
    padding: 0 10px;
    line-height: 22px;
    border-radius: 3px;
}
.btn:hover {
    color: #111;
    border: 1px solid #555;
}

HTML

<input type="submit" value="Submit" class="btn" />

问题是这个按钮在Firefox中看起来不正常：

我接受了Ant建议的解决方案：

.btn::-moz-focus-inner {
    padding:0;
    border:0;
}

后来我发现它只有在提交按钮之前存在文本字段<input type="text"...>时才有效。如果没有文本字段，由于某些奇怪的原因，问题仍然存在。我逐个部分删除了整个css文件，看看css文件中的一些规则是否导致了问题。它没有任何帮助。我创建了一个包含以下内容的新文件：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
.btn {
    text-align: center;
    color: #333;
    font-weight: 700;
    font-size: 11px;
    font-family: tahoma, verdana, arial, helvetica;
    background: -webkit-linear-gradient(#fefefe, #e7e7e7);
    background: -o-linear-gradient(#fefefe, #e7e7e7);
    background: -moz-linear-gradient(#fefefe, #e7e7e7);
    background: linear-gradient(#fefefe, #e7e7e7);
    height: 24px;
    width: auto;
    overflow: visible;
    border: 1px solid #c4c4c4;
    padding: 0 10px;
    line-height: 22px;
    border-radius: 3px;
}
.btn:hover {
    color: #111;
    border: 1px solid #555;
}

   .btn::-moz-focus-inner {
        padding:0;
        border:0;
    }
</style>
</head>
<body>
<input type="submit" value="Submit" class="btn" />
</body></html>

同样的问题 - 按钮在Firefox中看起来不同。只有在Jsfiddle，一切都还可以。

所以，我正在寻找一些解决方案。如果上边距大于下边距，则该按钮在Firefox中看起来很难看。

Answer 1

在W7上测试CH46 +，FF DE44 +和IE11 +（低于图像按钮顺序），删除::moz特定规则并更改.btn line-height: 1;，您将得到以下结果：

正如你所看到的，现在IE是一个像素关闭。但IE也使用了一种明显不同的字体平滑程序。我之前在各种网站上看到过。我不会花太多时间来纠正像素差异，如果我是你，即使浏览器开发人员似乎也无法破解它...

Firefox中的Css样式按钮具有不需要的填充/边距

1 个答案: