css - IE9 错误？显示 : table, 宽度:calc()

Question

我对目前遇到的 IE9 特定问题感到非常困惑，想知道我是否做错了什么或者之前是否有人遇到过这个问题。

看来如果我使用 calc() + display: table; IE9 无法处理的元素？

我把它放在一个 JS Bin 里:http://jsbin.com/himuhume/1/

或者，复制步骤是:

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;
}

任何想法将不胜感激，欢呼:)

Answer 1

我确认该错误存在，IE9 不会在具有 display:table 的 DIV 上应用 calc() 宽度。可能的解决方法是:

1. 在 display:table DIV 外部添加一个节点，对其应用 calc() 宽度并将 100% 宽度应用于 display:table DIV。
2. float 内容而不是使用 display:table