IE9からwidthやheightなどの数値を値に取る属性に対して、複数の値を組み合わせて計算するcalc()を値に取ることができるようになりました。これによって、例えば「10ピクセルの間隔で画面横幅いっぱいに要素を3つ並べる」といった表現が可能となりました。

ただし、caniuseによるといくつか不具合が報告されているようです。上記のサンプルなどはcalc()の中で入れ子の計算calc((100% - 20px) / 3)をしていますが、IE11でも正しく表示されているので、下記に当てはまるケースが全てNGというわけでは無いかと思いますが、実装時にはよく注意する必要がありそうです。

報告されている問題点

• IE10でdiv要素のスタイルの値にcalc()を指定した場合、子要素の同じ属性の値にinheritを指定するとクラッシュする。
• IE9からIE11でcalc()が指定された要素ではbox-shadowが描画されない。
• IE10とIE11ではtransformの中でのcalc()は無視される。
• SafariとiOSのSafari（6および7）ではcalc()中でビューポートユニット（vw, vhなど）は使えない。
• IEとEdgeではflexの中ではcalc()が使えない。例えばflex: 1 1 calc(50% - 20px);という記述は機能しない。
• Firefoxではline-height, stroke-width, stroke-dashoffset, stroke-dasharray属性にはcalc()が使えない。
• IE11ではcalc()の中での入れ子の計算、例えばwidth: calc((100% - 10px) / 3);で、小数点以下の値の処理がおかしいなどの不具合が報告されている。
• IE11では動的に生成される要素にはcalc()が正しく適用されないという報告がある。
• IE11ではcalc()で指定されたCSSプロパティのtransition処理がサポートされない。