Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

Firefox miclaculates CSS calc()

  • 2 réponses
  • 2 ont ce problème
  • 63 vues
  • Dernière réponse par 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.

Solution choisie

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)

Lire cette réponse dans son contexte 👍 1

Toutes les réponses (2)

more options

Solution choisie

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()