3

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.

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.

Any help would be greatly appreciated.

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

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

Also It has been asked before with no answer.

Community
  • 1
  • 1
Christopher Danson
  • 33
  • 1
  • 5
  • 1
    Answering this question because the linked question has some subtle differences which actually make it much more difficult to reproduce than this one. – BoltClock Apr 22 '15 at 16:18

2 Answers2

2

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.

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>
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
2

As of May 2018, the answer @BoltClock gave has been deprecated. The solution is a media query ( seen below ):

@media screen and (min--moz-device-pixel-ratio:0) {
    #logo {
        padding-top: 1.5rem;
    }
}
Dan
  • 919
  • 1
  • 10
  • 28
  • Pretty sure that's been deprecated too. They brought back support for @-moz-document for targeting Firefox a few months ago, they simply recommend against it unless there is a specific need to. -moz-device-pixel-ratio is at least as old if not older. If it is new, it's only a handful of versions newer, not 2018 new. – BoltClock Dec 13 '18 at 12:10
  • I couldn't find any resources saying @-moz-document support was brought back, only that support was dropped May 2018. Do you have a reference saying support is back? – Dan Dec 13 '18 at 13:54
  • The release notes for Fx 61 only mention dropping support for the feature in general, but the @-moz-document url-prefix() hack will continue to work, as in [this ticket](https://bugzilla.mozilla.org/show_bug.cgi?id=1446470). – BoltClock Dec 13 '18 at 13:59