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

Question

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

21

在Firefox 3.6中，您可以使用::-moz-focus-inner {border:0;padding:0;margin:0;}来删除forms.css添加的默认边距和填充。在Firefox 4中，我该如何重置它？我一直在搜索安装目录中任何可能会向我的按钮添加样式的.css文件，但在ff4中找不到任何文件 - 按钮仍然会得到那个烦人的1px顶部填充，这将不允许文本垂直居中对齐。

http://easwee.net/other/FF_problem.gif

编辑：我使用了重置样式表，因此不需要重置样式。这是浏览器样式表在这里混淆了。

- easwee

4个回答

1

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更简约。

- julien_c

1

尝试将其值设置为未定义（例如border:undefined）。不确定，但当我遇到类似问题时，它对我有用。

- wildcard

0

只需要使用一个 CSS 重置样式表，它将为大多数浏览器重置所有默认的 CSS。

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

或阅读此Stack Overflow问答

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

- Christophe

不会的。我正在使用重置样式表。请再次阅读问题以了解我的指涉。 - easwee

是的，但即使您在Firefox中找到了该CSS文件，更改仍将仅适用于您而不是其他人。 - Christophe

一旦我找到是哪个选择器添加了它，并在我的主样式表中使用更具体的选择器覆盖它，它将适用于所有人。直到现在，它在所有FF版本中都一直有效。 - easwee

哦，我明白了。看起来你找到它了 :) - Christophe

是的 - 也许我的问题有点不清楚 - 我修改了一些词语，以便将来如果有人搜索这个问题。 - easwee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- easwee · Accepted Answer

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

在您的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

现在只需将其放入您的主样式表中，如下所示：

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不会继承body字体样式。