userContent.css 在 Firefox 中获取固定宽度的字体答案

【问题标题】：userContent.css to get fixed width font in firefoxuserContent.css 在 Firefox 中获取固定宽度的字体
【发布时间】：2013-08-15 22:23:47
【问题描述】：

我正在尝试使用 userContent.css 中的一些 css 在 gmail 的新 compose 功能中获得一个固定宽度的等宽字体。像下面这样的东西曾经对我有用：

@-moz-document domain(mail.google.com)
{
  .ii, .Ak, .editable, .LW-avf
  {
    font-family: monospace !important;
    font-size: 100% !important;
  }
}

但它不再有效。在 Firefox 中使用检查元素，我看到消息类似于：

<body id=":di" class="editable LW-avf"

我在这里缺少什么吗？如果撰写窗口在 editable 和 LW-avf 类中，为什么不是 monospace？

【问题讨论】：

标签： css firefox gmail

【解决方案1】：

我猜 iframe 不会有任何与之关联的域。这似乎适用于查看和撰写消息：

@-moz-document domain(mail.google.com) {
    .gs .ii {
        font-family: monospace !important;
        font-size: 100% !important;
    }
}
@-moz-document domain() {
    .editable.LW-avf {
        font-family: monospace !important;
        font-size: 100% !important;
    }
}

【讨论】：

是的，但这不会将等宽字体应用于任何具有名为 .editable 的类的网页吗？
我对此进行了测试，该样式仅适用于没有域的页面。 iframe 就是这样一种情况，本地页面 (file://) 是另一种情况。如果您完全删除“@-moz-document domain()”，那么该样式将适用于任何地方。
啊，我明白了，聪明。仍然不完美，但比我拥有的更好！

【解决方案2】：

在仔细查看 gmail html 之后，看起来他们正在使用显式嵌入 html 的 iframe...我以前从未见过这种情况。比如：

<html>
  <body>
    <iframe>
      #document
        <!DOCTYPE html>
          <html>
            <body id=":di" class="editable LW-avf">
              ...
            </body>
          </html>
    </iframe>
  </body>
</html>

据推测，@-moz-document domain(mail.google.com) 与 iframe 中页面的 url 不匹配（甚至不确定该 URL 是什么）。

如果我不匹配 url，那么它可以正常工作。当然，现在样式将应用于任何具有名为editable 的类的页面。

当我有时间时，我可能会与 Mozilla 开发人员一起讨论这个问题。

【讨论】：

【解决方案3】：

很有趣，但由于我前段时间放弃了 GMail，因此无法检查具体细节（谷歌在推动社交网络方面变得太怪异了......）

http://www.w3.org/TR/CSS2/cascade.html#used-value

在级联顺序上，作者模式胜过用户模式。除非用户！重要。您正在使用哪个。

http://www.w3.org/TR/CSS2/cascade.html#specificity

这里说的是更具体的应用。

例如：

div#d.bclass { color: green; }
.aclass { color: red; }

<div id=d class="aclass bclass">hello world</div>

div 整天都是绿色的。但我打赌你已经知道了。

可能发生的情况是，浏览器正在选择一些比您的更具体的作者规则。这是一个错误...你能看看 Inspector 看看计算出来的字体是从哪里来的吗？

【讨论】：