现在不用再给浮动元素加 display:inline 修复双倍边距——该做法仅对ie6怪异模式有效，现代项目默认标准模式且ie6已退出，加此声明反而导致vertical-align异常、flex/grid冲突等新问题。
现在不用再给浮动元素加 display:inline 修复双倍边距——这个做法不仅过时，而且在现代浏览器中可能引发新问题。
为什么 display:inline 曾被当作“修复”
IE6 在 Quirks 模式下，当元素同时满足「块级 + float:left + margin-left」三个条件时，会错误地将横向 margin 计算两次。当时开发者发现：手动加上 display:inline 后，bug 消失了。但本质不是“修复”，而是让 IE6 改变盒模型计算路径——它把该元素当成行内级参与布局，从而绕开了触发条件。
这个技巧只在 IE6（且仅 Quirks 模式）下有效；标准模式、IE7+、所有现代浏览器都不受影响，也不需要它。
display:inline 在现代项目里反而会出问题
如果你在当前项目 CSS 中看到类似这样的规则：
.card { float: left; margin-left: 16px; display: inline; }
那它大概率是历史遗留代码。这类写法在 Chrome/Firefox/Edge 中会导致：
-
vertical-align行为异常，文字或子元素基线错位 - 与
flex或grid父容器冲突，子项尺寸计算不可控 -
::before/::after伪元素渲染位置偏移 - 某些 CSS-in-JS 工具（如 Emotion）会警告或忽略该声明
真正在意兼容性时该怎么做
如果你维护的系统仍需支持 IE6（极罕见），优先做三件事，而不是补 display:inline：
- 确认 HTML 开头有
，强制标准模式——多数双倍边距 bug 根本不会触发 - 把
margin搬到非浮动元素上：比如给父容器设padding-left，或用相邻兄弟元素承担间距 - 用
*margin-left: 8px;（星号 hack）或_margin-left: 8px;（下划线 hack）单独覆盖 IE6 值，比改 display 更精准
如果只是想快速清理旧代码，全局搜索 float.*display:inline 正则表达式，批量删掉——只要 DOCTYPE 正确、没开 Quirks 模式，删完不会有任何视觉变化。
真正难处理的从来不是“怎么写 CSS 让 IE6 不 double margin”，而是怎么判断哪一行样式还在用 2006 年的思维写布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
