@ -moz-document无法正常工作 [英] @-moz-document not working

问题描述

最后，我希望Firefox和chrome以相同的方式显示.在chrome上，我注意到float: left会中断站点，但可以在FF上工作.但是，如果我放float:none，Chrome可以完美显示，但在FF上却坏了.

In the end, I want firefox and chrome to display the same way. On chrome I've noticed that float: left breaks the site but works on FF. However, if I put float:none Chrome displays perfectly but then it is broken on FF.

我尝试了@-moz-document url-prefix() {.attempt{float:left}}，但似乎无法正常工作.我已经尝试过@document url() {.attempt{float:left}}，但这也无济于事.

I have tried @-moz-document url-prefix() {.attempt{float:left}} but that appears not to be working. I've tried @document url() {.attempt{float:left}} but that doesn't help either.

任何帮助将不胜感激.

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

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

也曾经被问到没有答案.

推荐答案

从表面上看，这似乎是因为您的@-moz-document出现在float:none规则之前，因此无论如何它都会被覆盖.有条件规则的存在不会改变级联的工作方式.这是常见

On the surface it would seem to be because your @-moz-document appears before the float:none rule — so it will always get overridden regardless. The presence of a conditional at-rule does not change how the cascade works; this is a common gotcha with @media rules and applies just as well to @-moz-document.

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

You want to move it to the bottom so it will override the previous rule properly in Firefox:

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

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

这篇关于@ -moz-document无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！