IE8继承父元素的宽度答案

【问题标题】：IE8 inherits width of parent elementIE8继承父元素的宽度
【发布时间】：2015-09-22 08:46:52
【问题描述】：

我想要一个里面至少有两个元素的盒子，每个元素都应该和最大的元素一样大。这在 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%。反正应该有那么大。

更新2：

删除显示：表格没有任何改变。

【问题讨论】：

我不得不从您的帖子中删除图片，因为 ImageShack 已将其删除并替换为广告。请参阅meta.stackexchange.com/q/263771/215468 了解更多信息。如果可能，您最好重新上传它们。谢谢！

标签： html css internet-explorer

【解决方案1】：

将严格的文档类型添加到您的页面，否则 IE 处于 quirks 模式：

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

在文件的顶部，它适用于我的 IE8。

编辑

在进一步的研究中，我很确定 IE8 的表格支持完全是错误的。我在文本上添加了一个包装元素，这样我就可以准确地模仿一个表格（下面的代码）。然后我在下面放了一个实际的表格。该表完全按照您的要求工作，但 divs 中的等价物却没有。我尝试了其他元素，例如跨度，但它仍然不起作用。

简而言之：尽可能使用普通表格，或者重新考虑布局。

这是我使用的代码。两个“表”应该是完全一样的，这里和那里少一点填充：

<!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>

【讨论】：

对我来说也是。但我无法更改文档类型。我必须坚持：
您可以更改所有的 HTML 和 CSS 代码，但不能更改 doctype？为什么？
谁说我可以改变所有的 CSS 和 HTML？ =)
谁说你不能？ 当然不是你。如果你遗漏了重要信息，比如你无法改变某些事情，我们应该怎么知道建议呢？ ://

【解决方案2】：

给两个元素width:100% 或display:table-row。

这可能是因为您有 display: table; 用于父 div。 display: table 告诉元素显示为表格。嵌套元素应显示为table-row 和table-cell，模仿良好的旧TR 和TD。

【讨论】：

【解决方案3】：

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

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

【讨论】：