IE11 flexbox防止文本换行？ [关闭]

Posted 2023-03-06

【中文标题】IE11 flexbox防止文本换行？ [关闭]

【英文标题】：IE11 flexbox preventing text wrapping? [closed]

【发布时间】：2013-10-08 21:45:54

【问题描述】：

我正在开发一个网站，在最新版本的 Firefox/SeaMonkey/Chrome 中显示正常，但有趣的是在 IE11 中存在渲染问题：http://devel.gooeysoftware.com/mozaddons/switching.php

如果您在 IE11 中加载它，左侧的“从 Firefox 切换到 SeaMonkey”菜单项不会将其文本换成包含 DIV 的大小，而是会溢出。我不明白这是为什么。它只是 IE11 中的一个错误，还是我缺少一些 CSS 来包装它？

看起来他们修复了 Edge 中的一堆 IE11 flexbox 渲染错误。

IE11:

边：

【问题讨论】：

我不认为这是一个骗局；我什至不确定那个链接的问题描述的是与这里相同的问题，而且接受的答案在我的 IE11 中实际上并不适用。

很高兴知道 ie11 不会结束我们过去十年的 CSS 噩梦。快点死吧，顺便说一句，好问题。

相关代码需要成为问题的一部分。

相关：Why IE11 doesn't wrap the text in flexbox?

【参考方案1】：

我遇到了这个错误的一个版本，其中弹性项目内的文本没有换行，并发现在我们的特定情况下修复它的方法只是将弹性项目内的文本换行在 <span> 元素中，这样文本节点就不是弹性项目的直接后代。这允许文本在 IE11 中换行，就像在其他浏览器中一样。

我怀疑这与 isralCDuke's answer 这个问题的原因相似，但似乎更简单，因为它不涉及额外的 CSS 规则。

【参考方案2】：

感谢 pyko，将以下类添加到任何不符合 flex 通常溢出规则的父类：

.ie-dont-overflow 
  -ms-overflow-x: hidden;
  -ms-overflow-y: hidden;

我不知道为什么会这样。 IE 很烂……

【讨论】：

请阅读此how-to-answer 并按照那里的指南提供高质量的答案。

@thewaywewere 我的回答有什么特别的问题吗？我找到了适合我的解决方案，因此想与他人分享。

【参考方案3】：

据我所知，IE 的 flexbox 实现已经被破坏了。这是对这个问题的长而短的回答。文本应该换行，但事实并非如此。它可以在 Firefox 和 Chrome 中使用。

更新：

IE11 的 flexbox 实现确实被破坏了。这现在可以在 Edge 中正确呈现。

【讨论】：

虽然已经找到了适合我的情况的解决方法，但它已经很糟糕了。将-ms-overflow-x: hidden; 添加到需要神奇包装的元素中......

对我也不起作用。

哈，-ms-overflow-x: hidden; 也帮了我大忙。我把它放在父元素上（display: flex 1 0 auto）！

【参考方案4】：

我通过在弹性项目中添加overflow: hidden 解决了这个问题。

但这也可以防止所有子元素溢出，因此如果您在弹性项目中使用工具提示或弹出框，这可能是一个不好的解决方案。

【参考方案5】：

聚会有点晚了，但设置white-space: normal 对我有用。

【讨论】：

在 IE11 上对我不起作用。

【参考方案6】：

这支笔有用吗？以下是我发现的 ie11 解决方法。

http://codepen.io/dukebranding/pen/vLQxGy

p 
    /* Wrap the child text in a block tag, add the following styles */
    display: flex;
    width: 100%;

【参考方案7】：

删除

align-items: flex-start

为#ContentNav。没有理由将它用于列式 flexbox。

【参考方案8】：

通过在 display: flex 元素上显式设置 width 或 max-width 以及需要将其文本换行的子元素，我能够使文本在 IE10 和 11 中正确换行。

.flex-fix 
  display: flex;
  flex-wrap: wrap;


.flex-fix,
.flex-fix > * 
  max-width: 100%;

这是Codepen demo。

【参考方案9】：

在 Flexbox 错误存储库中找到了这个简单的修复：

/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
*    overflow.
* 2. Set `box-sizing:border-box` if
*    needed to account for padding
*    and border size.
*/

.FlexItem 
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */

Flexbox bug repository

【讨论】：

虽然这个错误看起来很相似，但我无法在我的示例网站上使用该修复程序。

能否详细说明您解决问题的方式？

这是对我有用的答案。我有一个用于网站的图像浏览器，上面有文件夹导航，下面有一个float: right 右侧的上传表单。我不必添加任何类，只需将其放入当前选择器即可。当然，这对于您尝试的什么样的布局非常主观；感谢您发布此内容！

【参考方案10】：

我遇到了类似的问题，发现用IE11你需要使用语法：

flex: 1 1 auto;

而不是：

flex: 1;

感谢这个 Github 提交：https://github.com/philipwalton/solved-by-flexbox/pull/8/files

【讨论】：

我没有在任何地方使用flex: 1;；我正在使用flex: none;。

flex-shrink 和 flex-basis 已经是 1 并且默认是自动的，所以它不会改变任何东西。 IE 中的 flexbox 刚刚坏了。一旦弹性子项中的内容过多，它就会中断，但并非每次都如此。基于随机内容的内容，让我想起了 IE6。