Pesquisar no site de suporte

Evite golpes de suporte. Nunca pedimos que você ligue ou envie uma mensagem de texto para um número de telefone, ou compartilhe informações pessoais. Denuncie atividades suspeitas usando a opção “Denunciar abuso”.

Saiba mais

Esta discussão foi arquivada. Faça uma nova pergunta se precisa de ajuda.

Firefox miclaculates CSS calc()

  • 2 respostas
  • 2 têm este problema
  • 69 visualizações
  • Última resposta de 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.

Solução escolhida

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)

Ler esta resposta 👍 1

Todas as respostas (2)

more options

Solução escolhida

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