ie7下list-style-position: inside失效非bug，是其将序号视为文本流参与布局计算，遇显式宽高即破坏计数器连续性致全显“1”；唯一稳定解为改用outside或背景图模拟。
list-style-position: inside 在 IE7 下失效的真正原因
这不是 bug，是 IE7 对盒模型和计数器状态的理解偏差。它把 inside 模式下的序号/符号当成文本流一部分参与布局计算；一旦 li 显式设置了 width 或 height，IE7 就无法维持有序列表的计数器连续性，所有项都显示为 “1”。
典型现象：Chrome/Firefox 正常显示 1、2、3，IE7 全是 1；或者序号被截断、换行、错位。
- 别指望靠
margin-left或text-align补救——符号位置已脱离可控范围 -
list-style-position: outside在 IE7 是唯一稳定选项，但需手动统一缩进逻辑 - 如果必须用
inside，得放弃 IE7 支持，或改用背景图模拟方案（见下文）
用 background-image 替代原生 list-style 实现跨浏览器对齐
原生 list-style 在 IE6/7 下对 list-style-image 渲染极不稳定，且 background-position 基线对齐行为不一致。最可靠的做法是彻底剥离原生符号：
- 给
ul和li都设list-style: none - 在
li上用background-image绘制符号，配合background-position: left 0.35em center - 统一加
padding-left: 1.5em预留空间，避免文字被遮挡或挤出 - SVG 背景图比 PNG 更稳妥：
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23333'/%3E%3C/svg%3E")
注意：IE11 需对 SVG URL 双重编码，否则解析失败；Firefox 对 0.35em 的垂直居中更敏感，center 比 top 或像素值可靠得多。
为什么 box-sizing 和 line-height 必须与 list-style-position 同步设置
哪怕你把 list-style-position 设对了，如果没统一 box-sizing 和 line-height，对齐依然会崩：
-
li若未声明box-sizing: border-box，后续加border或outline会撑出容器，破坏整体缩进基准 -
line-height: 1.5em这类相对单位，在不同字号的li中继承后实际值不同，基线偏移直接导致视觉错位 - 必须让
ul和li共用box-sizing: border-box和无单位line-height: 1.4 - 清掉
ul默认padding和li默认margin，否则叠加不可控
flex 布局下 list-style 失效不是样式问题，是渲染上下文丢失
当 li 的 display 被设为 flex，它就不再是语义上的“列表项”，而是一个弹性容器。此时 list-style 属性被浏览器直接忽略——不是写错了，是渲染引擎切换了上下文。
- 若需在 flex 容器里保留列表符号，只能退回到
display: block或用::before伪元素模拟 -
display: flow-root是解决inside+ 浮动冲突的正确方式，但它不能恢复list-style本身 - IE6–8 不支持
flow-root，所以老项目中遇到浮动+序号重叠，优先删list-style-position: inside，回归outside+padding-left
真正容易被忽略的是：list-style 的一致性不取决于单个属性是否写对，而取决于 list-style-position、box-sizing、line-height 三者是否在 ul/li 上同步生效，且重置范围精准到列表元素本身，而非全局通配符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
