Question

我在div中有一个绝对位置的表，并希望该表与div中的文本保持一致。 Firefox这样做是正确的，Chrome需要显示：-webkit-box;使它工作。

但我的问题是，如何为Internet Explorer修复此问题？（IE 9及更高版本）

.container { 
  width:250px; 
  height:250px; 
  background:red; 
  position:relative; 
}
.container table { 
  position:absolute; 
  top:20px; left:100px; 
  display:-moz-box; 
  display:-webkit-box; 
  display:-ms-flex; 
  display:box; 
}

<div class="container">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</td>
    </tr>
  </table>
</div>

小提琴示例： http://jsfiddle.net/wLLGp/

注意：这是代码的简化版本，我无法真正更改div中的表，我知道这个解决了问题。

编辑：我使用的是响应式设计，所以只有外部div（.container）可以有宽度。

Answer 1

删除所有这些display属性，并将<table>提供给它所需的width：

容器宽度：250px - 左100px：150px;

.container table {
    left: 100px;
    position: absolute;
    top: 20px;
    width: 150px;
}

Here is a demo

在Internet Explorer中将div放在div中

1 个答案: