Question

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

似乎我使用calc（）+ display：table;在元素上IE9无法处理它？</ p>

我把它放在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（）宽度。可能的解决方法是：

在display：table DIV之外添加一个节点，对其应用calc（）宽度并将100％宽度应用于display：table DIV。
浮动内容而不是使用display：table

IE9错误？ display：table，width：calc（）

1 个答案: