0

div 内に絶対位置を持つテーブルがあり、そのテーブルを div 内のテキストにとどめたいと考えています。Firefox はこれを正しく行います。Chrome には display:-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) のみが幅を持つことができます。

4

1 に答える 1

0

displayこれらのプロパティをすべて削除し<table>、width必要なを指定します。

コンテナーの幅: 250px - 左 100px: 150px;

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

ここにデモがあります

于 2013-10-07T12:29:27.693 に答える