html - IE11 Flex 容器在表内时溢出

问题描述

在 IE11 和 Google Chrome 中查看以下代码示例。

在 Chrome 中，它按我的预期显示，但在 IE11 中，表格扩展得比包含块宽得多。这似乎是由于display: flex- 删除display,flex-direction和justify-content样式使所有内容弹回原位。

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

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

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

标签： htmlcssflexboxinternet-explorer-11

你说过“删除显示、flex-direction 和 justify-content 样式会使所有内容重新回到原位。”

如果您可以识别 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 浏览器中获得类似的输出。

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

html - IE11 Flex 容器在表内时溢出

问题描述

解决方案

推荐阅读