老版IE（IE6–IE8）不支持Flexbox等现代CSS特性，需改用float、表格布局或图片降级等兼容方案，并注意hasLayout触发、EOT字体格式及console安全检测。
老版 IE（IE6–IE8）不识别 display: flex 怎么办
直接不用。IE8 及以下完全不支持 Flexbox，连 display: -ms-flexbox 这种私有前缀都无效——那是 IE10+ 才开始加的。真要兼容，得换布局思路。
常见替代方案：
- 用
float+overflow: hidden清浮动，或zoom: 1触发 hasLayout（IE6/7） - 表格布局：
display: table/table-cell在 IE8 中可用，但 IE7 及以下只认真实<table> <li>避免依赖 <code>calc()、rgba()、border-radius等——它们在 IE8 及以下要么不支持，要么需 hack（如用 PNG 背景图模拟圆角）
IE6–IE7 连 margin: 0 auto 居中都不生效，咋调
因为这些版本对块级元素的居中要求更严格：必须有明确宽度 + 触发 hasLayout。
典型修复写法：
立即学习“前端免费学习笔记（深入）”；
.container {
width: 960px;
margin: 0 auto;
*zoom: 1; /* IE6/7 专用触发 hasLayout */
}注意点：
-
*zoom: 1是 IE6/7 的 hack，其他浏览器忽略；_width: 960px这类下划线 hack 已基本淘汰，优先用*zoom - 如果父容器是
position: relative且没设宽高，IE6 下margin: 0 auto可能失效，得补height: 1%或overflow: hidden - 绝对定位居中可走
left: 50%; margin-left: -480px（半宽负边距），但前提是宽度固定
IE8 不认 @font-face 或图标字体咋处理
IE8 支持 @font-face，但只认 EOT 格式，且语法必须严格：
@font-face {
font-family: 'MyIcon';
src: url('icon.eot');
src: url('icon.eot?#iefix') format('embedded-opentype'),
url('icon.woff') format('woff');
}关键细节：
- 必须提供
.eot，且第一个src值不能带format()，否则 IE8 直接跳过 -
?#iefix是绕过 IE6–IE8 的 EOT 解析 bug，不是可选参数 - 图标字体建议搭配
font-smoothing: antialiased，但 IE8 不支持该属性，只能接受默认渲染 - 更稳方案：用雪碧图（CSS Sprite）+
background-position替代图标字体
用 console.log 调试时 IE8 报错“对象不支持此属性或方法”
因为 IE8 只有在开发者工具（F12）打开时才注入 window.console 对象，关着就报错。
安全写法是先检测再调用：
if (window.console && console.log) {
console.log('debug info');
}或者更彻底地打桩：
if (!window.console) {
window.console = { log: function() {}, error: function() {} };
}别省这一步——线上代码若残留未删的 console，在 IE8 关闭调试器时会直接中断 JS 执行。
老版 IE 的样式问题，本质不是“加前缀就能好”，而是很多 CSS 特性它压根没实现。真正费时间的不是写 hack，是判断哪些视觉效果可以妥协、哪些必须降级为图片或 JS 补偿。越晚放弃 IE6–IE8，后期维护成本越高。
