[IE11 Flex容器在表内时溢出

Question

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

在Chrome浏览器中，它按预期显示，但在IE11中，该表扩展到比包含块更大的宽度。这似乎是由display: flex引起的-删除display，flex-direction和justify-content样式会使所有内容重新弹出。

我希望IE11以与Google Chrome浏览器相同的方式显示我的内容。我强烈希望尽可能不要更改标记。

我还遇到了许多其他问题，这些问题涉及与IE相关的flexbox bug，它们都建议更改各种flex属性，但是我尝试过的任何方法都没有改变效果。在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>

Answer 1

您说过，“删除显示方式，伸缩方向和理由内容样式会使所有内容恢复原状。”

如果可以识别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容器在表内时溢出

问题描述投票：0回答：1

1个回答

最新问题

[IE11 Flex容器在表内时溢出

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1