IE9でcalc()が効かないときの忘備録

ことの始まり

「はー。IE対応めんどくさいなー」
「でもIE９以上だとcalc()使えるし、まだ多少楽かな…」
「幅をcalc()で計算して、できた！」

-- 数日後

「IE9で崩れてるやん」

大まかな内容

error.html

<div class="hoge">
  <ul>
    <li>
    <li>
    <li>
  </ul>
  <div class="moge">
</div>

error.scss

.moge {
  width: 100px;
}

.hoge {
  > ul {
    display: table;
    width: calc(100% - 100px); // 効かない

    li {
      display: table-cell;
    }
  }
}

対策

• IE9ではtableまたはdisplay: tableに対してcalc()が効かない
• divなどで囲ってやり、そのdivに対してcalc()をかけると解決。

参考

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