IE全系完全不支持columns属性，包括column-count和break-inside等，语法层即被忽略；唯一可行方案是为IE单独提供基于float或display:table的手动分栏逻辑，或退回到单栏模式。
columns 在 IE 全系（包括 IE11）中完全不支持，不是“样式没生效”，而是浏览器压根不解析该属性。别浪费时间调试 column-count 或 column-width —— 它们在 IE 里等同于不存在。
IE 中 columns 属性彻底失效，必须换布局模型
IE6–IE11 均无 columns、column-count、break-inside 等任何多列相关 CSS 支持。Autoprefixer 不会加前缀，@supports 也检测不出，因为语法层就被忽略。你看到的“没反应”，本质是浏览器当它没写过。
- 不能靠条件注释加载 fallback 样式——IE10+ 已废弃条件注释，
<!--[if IE]>在 IE10/11 中被当普通注释跳过 - 不能用
display: -ms-grid模拟——-ms-grid是 Grid 的私有实现，和columns语义、行为、触发条件完全不同 - 唯一可行路径：对 IE 单独提供一套基于
float或display: table的手动分栏逻辑
用 float 实现三栏近似效果（IE8+ 可用）
目标是让一段文字内容视觉上“像分了三栏”，而非真正流式分栏。需手动拆内容、控制宽度与清除浮动。
- 把原文本按字数或段落数切为三组，分别放进三个
<div class="col">容器 - 给每个
.col设float: left; width: 32%; margin-right: 2%;（留出间隙，避免 IE7 下因盒模型误差挤错行） - 父容器加
::after伪元素清除浮动：.cols::after { content: ""; display: block; clear: both; } - IE6/7 需额外加
.cols { zoom: 1; }触发 hasLayout - 别用
inline-block：IE7- 下存在不可见空白字符间隙，且无法通过font-size: 0安全清除（会影响子级文本）
为什么不能用 flex 或 grid 回退？
看起来 display: flex 或 display: -ms-grid 更现代，但在 IE 中它们和 columns 是互斥的降级方向：
立即学习“前端免费学习笔记（深入）”；
-
display: flex在 IE10–IE11 中仅部分支持（flex-wrap 无效、justify-content 不稳定），且它是「行内布局」，无法模拟 column 的「内容自动断流填满」行为 -
display: -ms-grid要求显式定义每项位置（-ms-grid-column），而columns是纯流式、无 DOM 干预的——你没法把一段<p>自动塞进 -ms-grid 的第 2 行第 3 列 - 试图混合使用（比如容器设
columns+ 子项设display: flex）会导致 IE 直接放弃整个容器的渲染逻辑，结果更不可控
真正麻烦的点不在“怎么写三栏”，而在于「内容动态生成时如何切分」——JS 拆文本容易失真（截断 HTML 标签、破坏语义），服务端预切又增加复杂度。所以实际项目中，只要设计允许，优先在 IE 下退回到单栏阅读模式，比强行模拟分栏更可靠。
