@-moz-document 不工作

Question

最后，我希望 firefox 和 chrome 以相同的方式显示。在 chrome 上，我注意到 float: left 破坏了该站点，但可以在 FF 上运行。但是，如果我把float:none Chrome 显示完美，但它在 FF 上就坏了。

我尝试过@-moz-document url-prefix() {.attempt{float:left}}，但这似乎不起作用。我试过@document url() {.attempt{float:left}}，但这也无济于事。

任何帮助将不胜感激。

<style>
  @-moz-document url-prefix() {
    .attempt {
      float:left
    }
  }
  .attempt {
    float:none
  }
</style>

<div class="attempt">someText</div>

还有It has been asked before with no answer.

Answer 1

从表面上看，这似乎是因为您的 @-moz-document 出现在 float:none 规则之前 - 所以无论如何它总是会被覆盖。条件规则的存在不会改变级联的工作方式；这是一个 common gotcha 和 @media 规则，同样适用于 @-moz-document。

您想将其移至底部，以便在 Firefox 中正确覆盖之前的规则：

<style>
  .attempt {
    float:none
  }
  @-moz-document url-prefix() {
    .attempt {
      float:left
    }
  }
</style>

<div class="attempt">someText</div>

Answer 2

截至 2018 年 5 月，@BoltClock 给出的答案为 been deprecated。解决方案是媒体查询（见下文）：

@media screen and (min--moz-device-pixel-ratio:0) {
    #logo {
        padding-top: 1.5rem;
    }
}