Przeszukaj pomoc

Unikaj oszustw związanych z pomocą.Nigdy nie będziemy prosić Cię o dzwonienie na numer telefonu, wysyłanie SMS-ów ani o udostępnianie danych osobowych. Zgłoś podejrzaną aktywność, korzystając z opcji „Zgłoś nadużycie”.

Więcej informacji

Firefox miclaculates CSS calc()

  • 2 odpowiedzi
  • 2 osoby mają ten problem
  • 63 wyświetlenia
  • Ostatnia odpowiedź od cor-el

more options

We are using calc() to calculate the width of columns in a grid with fixed width gutters, but the calculation is off by a weird number and it forces the last column to drop below the rest. At first I thought that this was similar to older IE's rounding errors, but it is not.

Example:

.delivery-slots__slots, .delivery-slots__day {

   width: calc((((100% - 35px ) / 8) * 1) + 0px);
   float: left;
   margin-right: 5px;
   margin-top: 0;

}

... where 100% = 916px (it's a modal with a set max-width) and the last child has the right margin set to zero.

Other broswers (including IE9) correctly calculates this to be 110.125px; Firefox calculates this to be 111px (web inspector) or 110.133px (Firebug) - if you take the values and add them up again, I get 916.064px, which is wider than the parent.

We are using calc() to calculate the width of columns in a grid with fixed width gutters, but the calculation is off by a weird number and it forces the last column to drop below the rest. At first I thought that this was similar to older IE's rounding errors, but it is not. Example: .delivery-slots__slots, .delivery-slots__day { width: calc((((100% - 35px ) / 8) * 1) + 0px); float: left; margin-right: 5px; margin-top: 0; } ... where 100% = 916px (it's a modal with a set max-width) and the last child has the right margin set to zero. Other broswers (including IE9) correctly calculates this to be 110.125px; Firefox calculates this to be 111px (web inspector) or 110.133px (Firebug) - if you take the values and add them up again, I get 916.064px, which is wider than the parent.

Wybrane rozwiązanie

hi, thanks for bringing this up - please file a bug at bugzilla.mozilla.org for this behaviour. (as support.mozilla.org is a mere users helping users forum and developers won't read along here)

Przeczytaj tę odpowiedź w całym kontekście 👍 1

Wszystkie odpowiedzi (2)

more options

Wybrane rozwiązanie

hi, thanks for bringing this up - please file a bug at bugzilla.mozilla.org for this behaviour. (as support.mozilla.org is a mere users helping users forum and developers won't read along here)

more options

For reference:

  • Bug 1323735 - Misinterpreting CSS calc()