Why doesn't the CSS calc() function work for me?

Question

I learned about the CSS function calc() and its awesome. I tried to use it like:

#abc{width:calc(100%-20px)}
<         


        

Answer 1

It's both correct that IE9 supports CSS calc() and that you have to put spaces around a minus in calc.

Although knowing that I just had a very similar problem with IE9, where width: 50% yielded a different result than width: calc(50%). It turned out that it had to do with the display type which was set to inline-table. Changing it to inline-block made calc() work again. Note that http://caniuse.com/#feat=calc marks IE9's calc() support as "partial".