Question

在firefox 3.6中，您可以使用::-moz-focus-inner {border:0;padding:0;margin:0;}删除这些默认边距并添加填充forms.css。

如何在Firefox 4中重置此功能？我一直在搜索安装目录中的任何.css文件，这些文件可以为我的按钮添加样式但是找不到ff4的任何内容 - 按钮仍然会获得令人讨厌的1px顶部填充，这将不允许文本与垂直对齐中间。

编辑：我使用重置样式表，因此无需重置样式。这是一个混乱的浏览器样式表。

Answer 1

我实际上是自己找到了解决方案。

在您的网址字段中输入：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

现在把它放在你的主样式表中，如：

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;}

它不应该再压倒你的css了。另请注意，如果您没有为输入定义任何字体样式，FF将不会继承正文字体样式。

Answer 2

尝试将其值设置为undefined（border:undefined等）。我不确定这里，但是当我遇到类似的问题时，它对我有用。

Answer 3

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;
}

顺便说一下，Bootstrap的reset.less可能是一种更可靠，更长久的解决方案，可以实现跨浏览器的形式，而不是维护自己的规则。它比Meyer的reset.css更完整，但比normalize.css更简约。

Answer 4

只需使用css重置样式表，它将重置大多数浏览器的所有默认css

http://meyerweb.com/eric/tools/css/reset/

或阅读此stackeoverflow Q＆amp; A

https://stackoverflow.com/questions/116754/best-css-reset

如何在Firefox 4 +中重置默认按钮样式

4 个答案: