CSS 如何在 Firefox 4 + 中重置默认按钮样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5459893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reset default button style in Firefox 4 +
提问by easwee
In firefox 3.6 you could use ::-moz-focus-inner {border:0;padding:0;margin:0;}to remove those default margins and paddings forms.cssadded.
在 Firefox 3.6 中，您可以使用::-moz-focus-inner {border:0;padding:0;margin:0;}删除forms.css添加的那些默认边距和填充。
How can I reset this in Firefox 4? I've been searching for any .css files inside the install directory that could add styles to my button but can't find any for ff4 - the button still gets that annoying 1px top padding that won't allow the text to align to vertical middle.
如何在 Firefox 4 中重置它？我一直在搜索安装目录中的任何 .css 文件，这些文件可以为我的按钮添加样式，但找不到任何适用于 ff4 的文件 - 按钮仍然获得令人讨厌的 1px 顶部填充，不允许文本与垂直对齐中间。
http://easwee.net/other/FF_problem.gif
http://easwee.net/other/FF_problem.gif
EDIT: I use a reset stylesheet so no need to reset styles. It's a browser stylesheet that's messing here.
编辑：我使用重置样式表，因此无需重置样式。这是一个在这里乱七八糟的浏览器样式表。
回答by easwee
I actually found the solution myself.
我实际上自己找到了解决方案。
In your url field type: resource://gre-resources/forms.css- this will open forms.css for FF4 - and search for the following selector
在您的 url 字段中输入：resource://gre-resources/forms.css- 这将打开 FF4 的 forms.css - 并搜索以下选择器
button::-moz-focus-inner,
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
Now just put that in your main stylesheet like:
现在把它放在你的主样式表中，如：
button::-moz-focus-inner,
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 {border:0;padding:0;margin:0;}
It shouldn't be overriding your css anymore. Also note that if you haven't defined any font style for your inputs FF won't inherit body font styling.
它不应该再覆盖你的 css 了。另请注意，如果您尚未为输入定义任何字体样式，FF 将不会继承正文字体样式。
回答by julien_c
Twitter Bootstrap does it like this in its reset.less(which is a more barebonesversion of normalize.css):
Twitter Bootstrap 在它的reset.less（这是一个更准系统的版本normalize.css）中这样做：
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
As an aside, Bootstrap's reset.lessis probably a more reliable and perennial solution to achieve form cross-browser-ness than maintaining your own rules. It's much more complete than Meyer's reset.css, but more minimalist than normalize.css.
顺便说reset.less一句，与维护自己的规则相比，Bootstrap可能是实现表单跨浏览器更可靠和持久的解决方案。它比 Meyer 的更完整reset.css，但比normalize.css.
回答by wildcard
try setting it's values to undefined (border:undefinedetc). not sure here, but it worked for me when I had a similiar problem.
尝试将其值设置为 undefined （border:undefined等）。在这里不确定，但是当我遇到类似的问题时它对我有用。
回答by Christophe
just use a css reset stylesheet, that will reset all the default css for most browsers
只需使用 css 重置样式表，它将重置大多数浏览器的所有默认 css
http://meyerweb.com/eric/tools/css/reset/
http://meyerweb.com/eric/tools/css/reset/
or read this stackeoverflow Q&A
或阅读此 stackeoverflow 问答
