Menu
IE11 does not seem to calculate calc(50% - 1rem), but all other browsers do.
How can I fix it?
223
asked Apr 12 '14 23:04
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
A solution for you would be to use CSS calc, it has good browser support and fixes your issue in quite a simple manner. The only downside here is that it doesn't calculate the padding-top in % but you simply cannot calculate padding-top in % from the height of the element unless you use javascript.
On top of using CSS variables in calc you can also convert a value that has no units to a value with units by just multiplying the value by 1 of the unit type you want to convert to. This is very useful if you have CSS variables being set in JS that do not include the unit.
According to this answer, there is apparently a bug with flexbox and how IE11 handles it. Namely, you cannot use calc() with the flex shorthand in IE11 as you are trying to do.
I don't have IE11 on this machine, so I can't test any solution for you, nor am I really experienced with flexboxes, but try writing out the property you want to use (e.g. grow, shrink, basis) in long form.
EDIT: After some further research, a potential reason for this is that IE11 is trying to do something stupid like combine values to allow for decimals. Have you tried something like calc((50%) - (1rem))?
116
answered Oct 14 '22 03:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With