IE11 Flex 容器在内部时溢出 Table

Question

在 IE11 和 Google Chrome.

中查看以下代码示例

在 Chrome 中，它显示如我所料，但在 IE11 中，table 扩展到比包含块宽得多。这似乎是由 display: flex 引起的 - 删除 display、flex-direction 和 justify-content 样式会使所有内容弹回原位。

我希望 IE11 以与 Google Chrome 相同的方式显示我的内容。如果可能的话，我强烈希望不需要更改标记。

我遇到过许多处理与 IE 相关的 flexbox 错误的其他问题，他们都建议更改各种 flex 属性，但我尝试过的都没有改变效果。在 div.flex * 上设置 max-width 确实有效，但我宁愿尽可能保持这种动态。

<html>

<body>
  <style>
    div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
  </style>
  <div class="wrapper">
    <div class="flex">
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
    </div>
    <table class="wrapper-table">
      <tbody>
        <tr>
          <td>
            <div class="flex">
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Answer 1

你说 "removing the display, flex-direction, and justify-content styles make everything pop back into place."

如果您可以识别IE浏览器并应用特定样式，则可以参考此示例。

<html>

<body>
  <style>
@supports not (-ms-high-contrast: none) {
    div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
}

  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
     
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
}
  </style>
  <div class="wrapper">
    <div class="flex">
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
    </div>
    <table class="wrapper-table">
      <tbody>
        <tr>
          <td>
            <div class="flex">
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

输出：

这样，您无需对标记进行任何更改，您将在 IE 浏览器中获得类似的输出。

另外，您可以根据自己的需要修改代码。

IE11 Flex 容器在内部时溢出 Table

IE11 Flex Container Overflows When Inside Table

html

css

flexbox

internet-explorer-11