移动端列表垂直间距过大源于ios safari对ul/ol的默认外边距及字体缩放问题，需重置margin/padding、统一line-height、慎用font-size缩放；list-style-position: inside在ios易错位，建议改outside并手动padding；flex布局下须加flex-wrap: wrap和flex: 0 0 auto；自定义符号需确保热区完整，旧版safari需用::before降级。
移动端 ul 和 ol 列表项垂直间距过大
默认情况下，移动端浏览器（尤其是 Safari iOS）对 ul 和 ol 有较大的上下外边距，且 li 内部行高、字体大小缩放不一致，导致列表项看起来松散、错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 重置
ul、ol的margin和padding：用margin: 0; padding: 0;彻底剥离默认样式 - 统一
li行高与垂直对齐：设line-height: 1.4;+vertical-align: middle;（尤其在 inline-block 或 flex 子项中有效） - 避免仅靠
font-size缩放控制间距——iOS Safari 对小字号（如12px）会强制放大，破坏布局，建议用rem或em配合html { font-size: 16px; }基准
list-style-position: inside 在 iOS 上文字换行错位
设为 inside 时，项目符号被纳入内容流，但 iOS WebKit 渲染中常导致第二行文字顶到符号右侧，视觉上像“缩进失效”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先改用
list-style-position: outside;，再通过padding-left手动控制整体缩进，更可控 - 若必须用
inside，给li加box-sizing: border-box;+ 显式padding-left抵消符号挤占空间 - 注意：Android Chrome 通常表现正常，此问题集中在 iOS 15–17 的 Safari，测试务必真机验证
响应式列表中 flex 布局下 li 宽度塌陷或换行异常
把 ul 设为 display: flex; 实现横向列表时，li 在小屏下不自动换行、文字溢出，或在某些安卓 WebView 中宽度计算错误。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须加
flex-wrap: wrap;，否则默认nowrap强制单行 - 给
li设flex: 0 0 auto;防止被压缩变形；若需等宽分布，改用flex: 1 1 0;+min-width限制最小尺寸 - 避免在
li上直接设固定width（如width: 100px;），它会和flex冲突，优先用min-width+max-width
CSS 自定义列表符号后移动端点击热区变小
用 ::marker 或 background-image 替换默认圆点时，iOS Safari 默认只把文字区域当可点击热区，符号本身不响应触摸事件，导致按钮感弱、交互反馈差。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
li设padding-left留出符号空间，并确保整个li是可点击容器（比如包在<a></a>或带role="button"） - 若用
background-image，加background-size: contain;+background-repeat: no-repeat;，并设padding-left≥ 图标宽度 - 关键：iOS 对
::marker支持有限（仅 Safari 15.4+），旧版本需降级为::before+content模拟，且要加pointer-events: none;避免遮挡文字点击
列表的响应式调整不是套一套媒体查询就完事，真正卡住的往往是 iOS 对 ::marker 的支持断层、小屏下字体缩放引发的行高漂移、还有 flex 布局里那个没写全的 flex-wrap。这些地方不动手试一版真机，光看桌面预览根本发现不了。
