IE10中min-height失效的典型表现是父容器“看起来没高度”：背景色不显示、边框塌缩为一条线、子元素溢出或错位，且DevTools中computed height为0px；根本原因是IE10对inline-block/table-cell/absolute/flex等特定上下文中的min-height解析受限，并非不支持，而是高度计算链被border、transform、祖先height:0或兼容模式等隐性因素中断。
IE10 里 min-height 不生效的典型表现
页面在 IE10 下出现父容器“看起来没高度”：背景色不显示、边框塌缩为一条线、子元素溢出或错位。DevTools 中看到 computed height 是 0px，但 min-height 值已写入且未被覆盖。这不是 bug，而是 IE10 对某些上下文（如 display: inline-block 父容器、position: absolute 子项、或 flex/grid 容器嵌套）中 min-height 的解析限制。
min-height 在 IE10 失效的常见触发条件
IE10 支持 min-height，但它在以下场景下会“静默失效”：
- 父元素是
display: inline-block或display: table-cell—— 这两类 display 值在 IE10 中对min-height的处理不一致，常退化为height行为 - 父元素设置了
position: absolute但未配top/bottom—— 此时 IE10 无法推导可用高度，min-height被忽略 - 父元素是
display: flex且子项含flex: 1—— IE10 的 flex 实现不完全，若父级无显式height，min-height不参与主轴尺寸计算 - 父元素有
overflow: hidden+border+box-sizing: content-box—— IE10 会把 border 高度从min-height中扣除，导致视觉塌陷
IE10 兼容的 min-height 替代写法
不用 JS 检测也能兜底，关键是让 IE10 “认为”这个高度必须存在：
- 对同一元素同时写：
min-height: 200px; height: auto !important; height: 200px;—— IE10 解析height: 200px为最小高度，现代浏览器用!important覆盖它 - 若父元素是
inline-block，改用display: inline-table或直接切为block—— 后者对min-height支持最稳定 - 若用于 flex 容器，给其直接父级加
min-height: 200px（而非 flex 容器自身），因为 IE10 的 flex 高度继承依赖上层约束 - 避免混用
min-height和height: 100%—— IE10 中后者优先级更高，会覆盖前者
真正要检查的隐藏坑点
很多“IE10 min-height 不工作”的问题，其实根子不在 min-height 本身：
- 父元素的祖先链中存在
height: 0或min-height: 0—— IE10 会沿链向下传播这个约束，导致后代min-height无效 - 用了
rem单位但根字体未设（html { font-size: 16px; }缺失）—— IE10 对无根字号的rem解析为 0 - CSS 文件被 IE10 以兼容模式加载（
X-UA-Compatible缺失或设为IE=7）—— 此时整个min-height被忽略 - 父元素有
transform（哪怕只是transform: translateZ(0)）—— IE10 中这会创建新层叠上下文并干扰高度计算
IE10 的 min-height 不是“不支持”，而是对布局上下文异常敏感。修复重点不在加 hack，而在确认它所处的 display 类型、祖先高度链、以及是否被 transform/overflow/border 组合悄悄抵消。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
