移动端 border-bottom 分割线露底主因是 :last-child 依赖 dom 顺序而非视觉顺序，flex/grid 布局、隐藏元素或动态渲染易致错位；应改用 :not(:last-child)、0.5px 边框、js 标记或 margin-bottom 方案，并注意 ios 渲染兼容性。
border-bottom 分割线在移动端为啥总露底？
因为 last-child 在 flex 或 grid 布局里经常不生效——元素视觉上是最后一个，但 DOM 里未必是 :last-child。比如用 flex-wrap 换行后，最后一行的末尾项可能不是父容器的最后一个子元素；又或者用了 display: contents、visibility: hidden 等隐藏手段，但节点还在 DOM 树里。
实操建议：
- 优先用
:not(:last-child)而非:last-child加 border，更鲁棒：.item:not(:last-child) { border-bottom: 1px solid #eee; } - 如果列表项是动态渲染（React/Vue），确保 key 正确，避免 DOM 复用导致
:last-child错位 - 在 iOS Safari 上，
border-bottom可能因 subpixel 渲染变虚或消失，可加transform: translateZ(0)强制硬件加速
移动端分割线粗细和颜色怎么才不糊？
物理像素比（dpr）是关键。1px 在 dpr=2 的设备上实际是 2 物理像素，直接写 border-bottom: 1px 容易发虚或被缩成 0.5px 显示不出来。
实操建议：
- 用
border-bottom: 0.5px solid #eee—— 多数现代浏览器支持，iOS Safari 9+、Chrome 50+ 都 OK - 兼容老版本？改用
background-image: linear-gradient(#eee, #eee)+background-size: 100% 1px，再配合background-repeat: no-repeat和background-position: bottom - 别用
box-shadow模拟，它在滚动时易闪烁，且无法精确控制位置
Flex 列表中 last-child 不起作用怎么办？
Flex 容器下，:last-child 只认 HTML 结构顺序，不管排列结果。比如 flex-direction: column-reverse 或换行后最后一行的项，:last-child 依然指向原始最后一个元素。
实操建议：
- 放弃依赖结构伪类，改用 JS 动态加 class：
item.classList.add('is-last')，再写.item.is-last { border-bottom: none; } - 纯 CSS 方案：用
margin-bottom替代border-bottom，给每个项设margin-bottom: 16px，再给容器设margin-bottom: -16px抵消最后一项多余间距 - 若用 CSS Grid，可用
:nth-child(n)配合显式行数推算，但维护成本高，不推荐
为什么有时分割线在 iPhone 上突然没了？
常见原因是 viewport 缩放或字体大小调整触发了 iOS 的「自动调整字体大小」机制，间接影响了 border 渲染逻辑；也可能是父容器设置了 overflow: hidden 且 border 恰好落在裁剪边界外。
实操建议：
- 在
加viewport固定缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 禁用 iOS 自动调大字体：
* { -webkit-text-size-adjust: 100%; } - 检查父容器是否带
transform（如translateZ(0)），某些旧版 Safari 下会破坏 border 绘制，可尝试加backface-visibility: hidden
事情说清了就结束。最常被忽略的是：:last-child 是 DOM 层面的判断，而你看到的“最后一个”是渲染层面的结果——这两者在移动端布局中，差得比想象中远。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
