ie中max-width+height:auto失效需加width:auto修复：img{max-width:100%;width:auto;height:auto;}，动态加载时用settimeout延迟重绘，ie8降级用padding-top模拟宽高比。
IE中max-width + height: auto不生效的典型表现
直接写img { max-width: 100%; height: auto; }在IE（尤其是IE8–IE11）里经常失效：图片要么撑破容器，要么高度塌陷成0，尤其在响应式布局或src动态加载后。这不是CSS写错了，而是IE对height: auto在某些上下文里的解析逻辑和现代浏览器不同——它会忽略auto，回退到原始尺寸或0。
必须加width: auto才能触发IE正确计算
IE需要显式告诉它“宽度也别锁死”，否则max-width会和默认width: auto冲突，导致高度计算异常。实际生效的关键组合是：
img {
max-width: 100%;
width: auto;
height: auto;
}
-
width: auto不是可选的，它是IE识别“按比例缩放”的必要信号 - 只设
max-width不设width，IE可能把width当成inherit或100%处理，破坏比例 - 如果父容器有
display: table-cell或float，还要额外加vertical-align: top防底部留白
动态加载图片时IE需手动触发重绘
用JS插入<img>或切换src后，IE常不重新计算尺寸，导致max-width规则没应用。不能依赖CSS自动响应。
- 插入后立刻调用
img.style.display = 'block'或img.offsetHeight强制重排 - 避免在
onload里直接操作样式——IE有时还没完成解码就触发了，应加setTimeout(..., 0)延迟一帧 - 若用
background-image替代<img>，IE对background-size: contain支持更稳，但失去alt和SEO
IE8及以下必须用width: 100%降级方案
IE8不支持max-width在img上生效（只认table等少数元素），也不能用height: auto。必须放弃“保持原始宽高比”的优雅写法，改用固定比例容器+绝对定位模拟。
- 给父容器设
position: relative; width: 100%; padding-top: 56.25%;（16:9） - 子
img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 这样虽失真，但能保证不溢出——IE8里这是最可靠的“自适应”
真正麻烦的不是写法本身，而是IE对auto值的条件性忽略：它只在特定渲染路径下才尊重，而这个路径很难靠CSS预测。所以别试图只靠CSS“修好”，得在JS加载、DOM插入、容器结构三个环节都留一手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
