@-moz-文档不工作

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 规则之前 — 因此无论如何它总是会被覆盖。条件规则的存在不会改变级联的工作方式；这是具有 @media 规则的 common gotcha 并且同样适用于 @-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;
    }
}

@-moz-文档不工作

@-moz-document not working

html

css

firefox

google-chrome