
Firefox miclaculates CSS calc()
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.
선택된 해결법
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)
문맥에 따라 이 답변을 읽어주세요 👍 1모든 댓글 (2)
선택된 해결법
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)
For reference:
- Bug 1323735 - Misinterpreting CSS calc()