[英]Remove extra button spacing/padding in Firefox
See this code example: http://jsfiddle.net/Z2BMK/请参阅此代码示例: http : //jsfiddle.net/Z2BMK/
Chrome/IE8 look like this Chrome/IE8 看起来像这样
Firefox looks like this Firefox 看起来像这样
My CSS is我的 CSS 是
button {
padding:0;
background:#080;
color:white;
border:solid 2px;
border-color: #0c0 #030 #030 #0c0;
margin:0;
}
How can I change the code sample to make the button the same in both browsers?如何更改代码示例以使两个浏览器中的按钮相同? I do not want to use JavaScript based hyperlinks because they do not work with space bar on keyboard and it has to have an href
URL which is not a clean way to handle things.我不想使用基于 JavaScript 的超链接,因为它们不能与键盘上的空格键一起使用,而且它必须有一个href
URL,这不是一种处理事情的干净方式。
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
Add this:添加这个:
button::-moz-focus-inner {
padding: 0;
border: 0
}
http://jsfiddle.net/thirtydot/Z2BMK/1/ http://jsfiddle.net/thirtydot/Z2BMK/1/
Including the border
rule above is necessary for buttons to look the same in both browsers, but also it removes the dotted outline when the button is active
in Firefox.包括上面的border
规则对于按钮在两种浏览器中看起来相同是必要的,而且当按钮在 Firefox 中active
时,它也会删除虚线轮廓。 Lots of developers get rid of this dotted outline, optionally replacing it with something more visually friendly.许多开发人员摆脱了这种虚线轮廓,可选择用视觉上更友好的东西替换它。
To fix it on input elements as well add要将其固定在输入元素上以及添加
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner
is simple perfect!简单完美!
Corrected version of @thirtydot's answer: @thirtydot 答案的更正版本:
button:: {
padding: 0px;
border: 0px;
}
button::-moz-focus-inner {
padding: 0px;
border: 0px;
}
Regarding Firefox 87:关于 Firefox 87:
button
in button::-moz-focus-inner
cannot be a class. button
button::-moz-focus-inner
中的button::-moz-focus-inner
不能是类。 (Eg .mybutton::-moz-focus-inner
does not work) (例如.mybutton::-moz-focus-inner
不起作用)
There must be a button { padding:0px; border: 0px; }
必须有一个button { padding:0px; border: 0px; }
button { padding:0px; border: 0px; }
button { padding:0px; border: 0px; }
style present as well (This style can be given per class). button { padding:0px; border: 0px; }
本风格以及(此风格可以每类给出)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.