Firefox中的Css样式按钮具有不需要的填充/边距
昨天我在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中看起来很难看.
在 W7 上的 CH46+、FF DE44+ 和 IE11+（下图按钮顺序）中进行测试，删除 -::moz特定规则并进行更改.btn line-height: 1;，您将得到以下结果：
正如您现在所看到的，IE 落后了 1 个像素。但 IE 也使用了明显不同的字体平滑例程。我之前在各个网站上都看到过。如果我是你，我不会花太多时间来纠正像素差异，因为即使浏览器开发人员似乎也无法破解它......