IE9 Bug? display: table, width: calc()

Question

i'm quite perplexed by a IE9 specific issue I have at the moment, wondering if i'm doing anything wrong or whether anyone has encountered this before.

It seems if I use calc() + display: table; on an element IE9 can't handle it?

I've put it in a JS Bin here: http://jsbin.com/himuhume/1/

Or, reproduction steps are:

HTML

<div class="container">
    <div class="inside">
    </div>
    <span>Calc without display works</span>
  </div>
  <div class="container">
    <div class="inside break">
    </div>
    <span>Calc display table does not</span>
  </div>

CSS

body {
background-color: grey;
  font-family: Arial;
  font-size: 12px;
}

.container {
width: 100px;
  height: 100px;
  background-color: white;
  margin: 50px;
}

.inside {
  width: calc(90% + 10px);
  height: 20px;
  background-color: black;
}

.break {
    display: table;
}

Any ideas would be appreciated, cheers :)

Answer 1

I confirm that the bug exists, IE9 doesn't apply calc() width on DIVs with display:table. Possible workarounds are:

1. adding a node outside the display:table DIV, applying the calc() width to it and applying 100% width to the display:table DIV.
2. floating the contents instead of using display:table