html - @-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 规则之前 — 因此无论如何它都会被覆盖。条件规则的存在不会改变级联的工作方式；这是common gotcha与 @media 规则一样适用于 @-moz-document。

你想把它移到底部，这样它就会在 Firefox 中正确地覆盖之前的规则:

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

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