css - IE11 flexbox 阻止文本换行?

标签 css flexbox internet-explorer-11

<分区>

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

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

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

IE11:
IE11 rendering

边缘:
Edge rendering

最佳答案

在 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

关于css - IE11 flexbox 阻止文本换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19138107/

相关文章:

jquery - 同位素过滤不适用于 anchor 标记

javascript - 禁用网页上的所有滚动

html - 根据 child 的尺寸自动调整 parent 的高度( flex 元素)

css - 水平居中,带 margin 和 max-width

transparency - IE11 中的边框图像透明度错误

javascript - 使用文档模式调整 IE11 的 Iframe 高度

css - .net core angular 2 css 未找到

javascript - Bootstrap 模态溢出。如何纠正? (定心)

css - fxLayoutAlign ="space-between center"- 与对齐中的最后一行重叠

css - 一个 CSS 站点在 FireFox 和 Chrome 中都能正确显示,但是在 IE11 中的边框半径不能正确显示