flexbox 实现等高布局时需为容器设 min-height/height 以兼容 ie10–ie11，-ms-flex: 1 替代 flex: 1；css table 兼容 ie8+ 但不支持 margin 和 vertical-align middle/bottom；grid 在 ie 中不可用；js 补位仅限必要场景。
Flexbox 实现等高布局时 IE10–IE11 的兼容问题
Flexbox 是目前最简洁可靠的等高布局方案，但 display: flex 在 IE10–IE11 中需加 -ms- 前缀，且部分属性行为不一致。比如 align-items: stretch 默认生效，但若父容器未设高度，IE 下子项可能无法真正等高。
- 必须为 flex 容器显式设置
min-height或height（哪怕只是min-height: 1px），否则 IE11 会忽略等高逻辑 -
flex: 1在 IE 中需写成-ms-flex: 1，否则子项不占满剩余空间 - 避免在 flex 容器上同时使用
float或display: inline-block，IE 下易触发 layout bug
用 CSS Table 模拟等高（兼容 IE8+）
当项目必须支持 IE8/9 时，display: table + display: table-cell 是最稳妥的等高方案，它天然具备单元格对齐特性，且无需 JS 干预。
- 父容器设
display: table; width: 100%，子项设display: table-cell - 不支持
margin，需用padding或嵌套 div 控制间距 - IE8 下
table-cell不支持vertical-align: top以外的值，慎用middle或bottom - 响应式断点处建议切换回 Flexbox，因为 table 布局无法通过
flex-wrap自动换行
JavaScript 补位：仅在必要时手动同步高度
纯 CSS 方案失效时（例如内容动态加载、跨 iframe 区域、或需要精确像素对齐），才考虑 JS 主动计算并设置高度。不要一上来就用 JS，它破坏可访问性且增加维护成本。
- 优先监听
resize和DOMContentLoaded，避免重复计算；内容异步加载后需手动触发一次 - 用
getBoundingClientRect().height而非offsetHeight，更准确反映渲染后尺寸 - 批量操作时缓存 DOM 查询结果，避免反复
document.querySelectorAll - 注意 SSR 场景：服务端无 DOM，JS 高度同步逻辑必须包裹在
if (typeof window !== 'undefined')中
Grid 布局的兼容性现实
CSS Grid 确实能一行代码实现等高（如 grid-template-rows: 1fr），但它在 IE 中完全不可用——IE 的 display: -ms-grid 是另一套不兼容的语法，且不支持 fr 单位和自动等高语义。
- 除非项目已明确放弃 IE，否则不要把 Grid 作为等高主方案
- Can I Use 数据显示：
display: grid全局支持率超 95%，但企业内网环境仍常见 IE11，需单独判断 - 若用 PostCSS 插件（如
postcss-cssnext）自动加前缀，务必确认其不向 IE 输出无效的 Grid 代码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
