为什么CSS flex-wrap换行布局在IE10中显示重叠_使用-ms-flex-direction-css教程-PHP中文网

ie10 完全不支持 flex-wrap，包括 -ms-flex-wrap，子项强制单行溢出；替代方案用 inline-block + font-size: 0 + calc() 精确宽度，或分层降级为 table/float 布局。

为什么css flex-wrap换行布局在ie10中显示重叠_使用-ms-flex-direction

flex-wrap 在 IE10 中根本不起作用，加 -ms-flex-direction 也救不回来——它不是“换行方向写错了”，而是整个换行能力缺失。

IE10 的 `flex-wrap` 是个假属性

IE10 支持 display: -ms-flexbox，但 -ms-flex-wrap 这个属性压根没实现。你写 -ms-flex-wrap: wrap 或 flex-wrap: wrap，DevTools 里会直接划掉（strikethrough），控制台也不报错。子项永远被锁死在一行，宽度超了就溢出、重叠、消失，不会自动折行。

这不是兼容性“打折扣”，是功能彻底缺席。连 -ms-flex-direction: column 配合 wrap 也没用——IE10 不支持多行 flex 容器的任何换行逻辑。

别试 -ms-flex-wrap: wrap：IE10 不识别，写了等于没写
别指望 -ms-flex-direction: column 绕过：column 下依然不换行，只是把所有子项堆成一列而已
别依赖 @supports (flex-wrap: wrap)：IE10 根本不进这个块，兜底样式必须独立准备

为什么看起来像“重叠”？其实是单行溢出

所谓“重叠”，多数是子项宽度总和 > 容器宽度，又无法换行，导致后几项被挤到可视区外、或与其他元素视觉重叠。常见诱因：

子项用了 flex: 1 或 width: 33%，但 IE10 解析错误，实际宽度失控
父容器没设 width 或 max-width，Flex 容器默认撑满，失去换行触发条件
子项含 margin 或 border，IE10 在计算可用空间时出错，进一步加剧溢出

此时打开 DevTools，选中容器，看 computed 样式里 flex-wrap 是否被划掉；再 hover 子项，确认它们是否真正在容器边界外渲染。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

真正能跑通的替代方案：放弃 flex-wrap，改用 `inline-block` + 精确宽度

核心不是“怎么让 IE10 支持 wrap”，而是“怎么不用 wrap 也能达到换行效果”。实操要点：

父容器设 font-size: 0 消除 inline-block 间的空白间隙
子项用 display: inline-block + width: calc(33.333% - 2px)（减去左右 margin/border/padding 总和）
子项内重置 font-size，避免文字变小
用 JS 补齐行高对齐（如所有子项设相同 min-height，或 JS 计算最大高度后统一设置）

示例关键代码：

.container {
  font-size: 0;
}
.item {
  display: inline-block;
  width: calc(50% - 12px); /* 12px = 左右 margin + border + padding 总和 */
  font-size: 14px;
  vertical-align: top;
}