Question

我想要一个内部至少包含两个元素的盒子，每个元素都应该与最大的元素一样大。这在FF / Safari中工作正常，但不适用于IE。

<html>
  <head>
    <title>whatever</title>
  <style>
    .box {
      display: table;
      width: 250px;
      border: 1px solid red;
          padding: 10px;
    }

        .top {
          border: 1px solid blue;
        }

        .bottom {
          border: 1px solid green;
          margin-top: 10px;
        }
  </style>
</head>
<body>
      <div class="box">
        <div class="top">
          top
        </div>
        <div class="bottom">
          bottom
          oooooooooooooooooooooooooooooooooooooooooooooooooo
        </div>
      </div>
</body>
  </html>

更新

给.top宽度100％不起作用。 div（或块元素）默认情况下确实有100％。无论如何它应该是那么大。

UPDATE2：

删除display：table不会改变任何内容。

Answer 1

将严格的doctype添加到您的页面，否则IE处于怪癖模式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在文件的顶部，它可以在IE8中使用。

修改

在进一步的研究中，我非常确定IE8的表支持是完全错误的。我在文本上添加了一个包装元素，以便我可以完全模仿表格（下面的代码）。然后我在下面放了一张实际的表格。该表完全按照您的意愿工作，但div中的等价物却没有。我尝试了其他元素，如跨度，但它仍然无效。

简而言之：如果可以，请使用普通表格，或重新考虑您的布局。

这是我使用的代码。两个“表”应该完全相同，在这里和那里保存一点填充：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>whatever</title>
  <style>
    .box {
        display: table;
        width: 250px;
        border: 1px solid red;
        padding: 10px;
        padding: 5px;
    }

    .top {
        display: table-row;
        margin: 10px;
        padding: 5px;
    }

    .bottom {
        display: table-row;
        margin: 10px;
        padding: 5px;
    }

    .top .cell {
        display: table-cell;
        border: 1px solid blue;
        margin: 5px;
        padding: 5px;
    }
    .bottom .cell {
        display: table-cell;
        border: 1px solid green;
        margin: 5px;
        padding: 5px;
    }
  </style>
</head>
<body>
      <div class="box">
        <div class="top">
          <div class="cell">top</div>
        </div>
        <div class="bottom">
          <div class="cell">bottom
          oooooooooooooooooooooooooooooooooooooooooooooooooo</div>
        </div>
      </div>

      <br><br>

      <table style="border: 1px solid red; display: table;width: 250px">
      <tr style="display: table-row;">
          <td style="border: 1px solid blue; display: table-cell;">top</td>
      </tr>
      <tr style="display: table-row;">
          <td style="border: 1px solid green; display: table-cell;">bottom
          oooooooooooooooooooooooooooooooooooooooooooooooooo</td>
      </tr>
      </table>
</body>
</html>

Answer 2

同时提供元素width:100%或display:table-row。

发生这种情况可能是因为父div有display: table;。 display: table告诉元素显示为表格。嵌套元素应显示为table-row和table-cell，模仿旧的TR和TD。

Answer 3

我不确定width是否是div的继承属性。

要解决此问题，请将.top的宽度设置为100%。

IE8继承了父元素的宽度

3 个答案:

修改