移动端sticky失效主因是滚动上下文缺失，需将滚动收归内层容器：父容器设max-height+overflow-y:auto，面包屑设position:sticky+top值，并避免transform等创建新层叠上下文。
sticky 失效时怎么救回来
移动端 position: sticky 在面包屑上经常不粘，不是代码写错了，而是它根本没触发——浏览器只在“最近的滚动容器”内生效，而多数页面直接在 <body> 滚动，iOS Safari 对 <body> 上的 sticky 支持极差。
必须把滚动行为收归到一个明确的内层容器里：
- 给面包屑的直接父容器加
max-height: 100vh（或具体高度）和overflow-y: auto - 面包屑自身设
position: sticky+top: 0（若顶部有状态栏/导航栏，用top: 44px这类具体值） - 确保该父容器没有
transform、opacity < 1、will-change或filter——这些会隐式创建新层叠上下文，让z-index失效
文字超长时该截断还是滚动
小屏下路径一长就挤成一团，单靠 text-overflow: ellipsis 常常不生效，因为 Flex 布局默认不收缩子项。
两种策略要分清场景：
立即学习“前端免费学习笔记（深入）”；
-
纯省略（中屏）：父容器设
width: 100%，每个<li>加min-width: 0和flex-shrink: 1，再套white-space: nowrap+overflow: hidden+text-overflow: ellipsis -
横向滚动（小屏）：容器加
overflow-x: auto+overflow-y: hidden+white-space: nowrap，关键补一句-webkit-overflow-scrolling: touch，否则 iOS 滑不动
别忘了隐藏原生滚动条：::-webkit-scrollbar { display: none; }，Firefox 不支持，得接受它的默认样式。
分隔符在响应式下怎么不乱跑
用 ::before 插入 / 或 > 最常见，但 Flex 下容易错位或换行。
核心是控制“谁负责间距、谁负责内容”：
- 分隔符统一用独立
<span>或<li>，而不是伪元素——这样能用sm:hidden（Tailwind）或媒体查询精准控制显隐 - 所有分隔符加
flex-shrink: 0，防止被 Flex 压缩变形 - 如果坚持用伪元素，
margin-right必须加在<li>上，而不是::before里，否则 iOS Safari 渲染不稳定 - 分隔符颜色建议用
currentColor，随链接色自动变化，悬停时不用额外写样式
当前页高亮为什么总不生效
不是 CSS 没写对，而是语义结构错了。Bootstrap 5 和现代可访问性规范都依赖 aria-current="page"，不是 class="active"。
检查这三点：
- 末级必须是
<span>或纯文本，不能是<a>标签 - 该元素必须带
aria-current="page"属性，且父<ol>有aria-label="breadcrumb" - CSS 选择器得写成
.breadcrumb-item[aria-current="page"]，不是.breadcrumb-item.active
另外，<ol> 必须用语义化结构，别用 <div> + Flex 模拟——屏幕阅读器会跳过整个导航，用户根本感知不到路径。
