IE6双倍浮动margin仅在怪异模式下触发，正确解法是确保标准模式（声明DOCTYPE）、避免浮动+横向margin组合，而非用display:inline等误用hack。
IE6双倍浮动margin不是CSS写得不对，而是它只在怪异模式（Quirks Mode）下才会触发——只要页面顶部有 <!DOCTYPE html>，这个bug根本不会出现。
先确认是不是真在IE6怪异模式下运行
很多所谓“IE6兼容问题”其实是开发者工具里文档模式被手动切成了 IE6 Quirks。按 F12 打开调试器，看右上角的“文档模式”是否真的是 Quirks。如果不是，所有针对双倍margin的CSS修复都白加。
- 检查HTML第一行：必须是干净的
<!DOCTYPE html>，前面不能有空格、注释或BOM头 - 构建流程（如Vite、Webpack）可能悄悄注入XML声明，导致浏览器降级到怪异模式
- CDN或反向代理可能重写
Content-Type响应头，强制触发Quirks Mode
display:inline 不是修复，是历史误用
给浮动元素加 display:inline 在标准模式下完全无效；在怪异模式下它“碰巧”绕过bug，但代价是污染现代布局。
- Chrome/Firefox中，
float+display:inline会让width/height失效，Flex/Grid子项错位，伪元素消失 - PostCSS构建时可能删掉
*margin-left这类hack，但会保留display:inline，变成静默污染源 - 如果已有该写法，优先批量删除；删不掉就用
display:block !important覆盖（IE6支持!important）
真正稳的解法：避开触发条件，而不是硬修
双倍margin只在「浮动 + 横向margin」组合下触发。改结构比打补丁更可靠。
立即学习“前端免费学习笔记（深入）”；
- 把
margin-left: 10px从浮动元素上拿掉，挪到父容器设padding-left: 10px - 包一层非浮动的
<div>，外边距落在 wrapper 上 - 避免连续多个
float:left并排——IE6只对第一个元素双倍，但后续维护者看不懂为什么只修第一个 - 若必须用hack，用
_margin-left: 5px（下划线仅IE6识别），比display:inline更轻量、更明确
最容易被忽略的是：那个 display:inline 可能藏在某个十年没动过的 reset.css 里，或者被UI框架默认注入。留注释比留代码重要——尤其当它看起来毫无道理的时候。
