【问题标题】:How to reset default button style in Firefox 4 +如何在 Firefox 4 + 中重置默认按钮样式
【发布时间】:2011-07-24 12:17:42
【问题描述】:

在 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

编辑:我使用重置样式表,因此无需重置样式。这是一个浏览器样式表在这里搞砸了。

【问题讨论】:

    标签: css firefox button input


    【解决方案1】:

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

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

    或阅读此 stackeoverflow 问答

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

    【讨论】:

    • 不,不会的。我正在使用重置样式表。再次阅读问题以了解我所指的内容。
    • 是的,但即使您在 Firefox 中找到该 css 文件,更改仍将仅适用于您而不适用于其他人
    • 一旦我找到哪个选择器正在添加它,它将适用于每个人,并在我的主样式表中使用更指定的选择器覆盖它。到目前为止,它始终适用于所有 FF 版本。
    • 哦,是的,我明白了。看起来你找到了它:)
    • 是的 - 也许我的问题有点不清楚 - 如果有人搜索此内容,请为将来编辑几个字。
    【解决方案2】:

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

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

      • 谢谢。遗憾的是,在 Firefox 6 中查找这些 css 资源文件不再适用;但是,这仍然解决了我的问题。
      • @PatrickRobertSheaO'Connor 在 ff6 中改为 resource://gre-resources/html.css
      • +1 非常感谢...试图找出持久边界太令人沮丧了..
      • 谢谢,自己被这个烧了。一个小提示:margin:0 似乎没有必要,因为 Firefox 自己没有定义它。
      • @Damir Zekić 也许在最新版本中 - 在旧版本中是需要的。
      【解决方案4】:

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

      【讨论】:

        猜你喜欢
        • 2021-10-06
        • 1970-01-01
        • 2013-04-11
        • 2014-02-15
        • 1970-01-01
        • 2011-05-17
        • 2018-02-17
        • 1970-01-01
        • 2012-10-24
        相关资源
        最近更新 更多