inline-block在ie8/ie9中换行的根本原因是浏览器将html换行符和空格渲染为占宽空白节点，导致元素总宽超100%而折行；实操推荐font-size:0+子元素重设字号、html注释连写或float方案。
为什么 inline-block 在 IE8/IE9 里会换行
根本原因是这些浏览器把 HTML 中的换行符、空格当作真实文本节点渲染，每个空白字符占约 4px 宽度（取决于 font-size 和字体），哪怕你设了 width: 33.33%，三个元素加起来也超 100%——于是第二行就出来了。
这不是 bug，是规范行为；但旧版 IE 对 white-space、letter-spacing 的支持又不完整，很多现代方案直接失效。
-
white-space: nowrap在 IE8 中部分生效，但会破坏父容器内其他文本流（比如里面还有段落或按钮） -
letter-spacing: -4px在 IE8/9 中可能被忽略，或导致子元素文字错位、模糊 - Flexbox 完全不可用（IE10 才开始支持部分 flex 属性）
兼容 IE8/IE9 的实操解法
优先选稳定、副作用小、无需 JS 的纯 CSS 方案。以下按推荐顺序排列：
- 给父容器加
font-size: 0，再在每个子元素上显式恢复字号，例如font-size: 14px—— 空白字符变“不可见”，且不影响文字渲染 - 用注释连写 HTML：
<div class="col"></div> <!-- --><div class="col"></div> <!-- --><div class="col"></div>，既保持可读性，又删掉换行符 - 改用
float: left+ 清除浮动（overflow: hidden或::after伪元素），这是最稳妥的兜底方案，IE6 都能跑
别用 word-spacing: -1px 去 hack IE7/8——它只对单词间距起作用，对换行符无效，还容易触发重排错位。
容易被忽略的细节
就算用了 font-size: 0，如果子元素里有 input、textarea 或 button，它们的默认字号可能被继承异常；必须单独重置：
input, button, select { font-size: 14px; }- 如果子元素用了
vertical-align: middle，注意 baseline 对齐仍受line-height影响，不是仅靠font-size能解决的 - IE8 不支持
calc()，所以别指望用width: calc(100% / 3)来绕开间隙问题
真正麻烦的从来不是那几个像素的间隙，而是修复后某处文字突然变细、输入框 placeholder 错位、或者缩放时布局崩塌——动手前先在 IE 开发者工具里开“渲染层高亮”，确认你压掉的确实是空白，不是别的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
