当前位置：文江博客话题详情

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

发布于 2024-10-26 18:03:14 字数 399 浏览 0 评论 0原文

在 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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦年海沫深 2024-11-02 18:03:14

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

在您的 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 将不会继承正文字体样式。

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

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.

回复收藏 0 原文

月亮坠入山谷 2024-11-02 18:03:14

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

回复收藏 0 原文

满地尘埃落定 2024-11-02 18:03:14

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

Twitter Bootstrap does it like this in its reset.less (which is a more barebones version of 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.less is 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.

回复收藏 0 原文