用 ::before 或 ::after 插入分隔符时，为什么分隔符不显示？
常见错误是没给伪元素设置 content，或者内容为空字符串。CSS 伪元素默认不渲染，必须显式声明 content: "" 或 content: ">" 等值才能生成节点。
另一个高频问题是父容器或子项设置了 overflow: hidden，而分隔符用绝对定位或负 margin 溢出后被裁剪。面包屑中常因 flex 容器收缩导致伪元素位置异常。
- 确保每个分隔符所在
<li>或<a></a>元素设置了position: relative - 伪元素推荐用
::after放在非末项后：li:not(:last-child)::after - 避免用
float布局，它与伪元素定位容易冲突；改用display: flex+gap更稳（但注意 IE 不支持gap）
如何让面包屑宽度自适应容器且文字不换行？
核心是控制文本溢出行为和弹性空间分配。不能只靠 width: 100%，因为内部项会撑开容器；也不能无脑 white-space: nowrap，否则小屏直接溢出。
更可靠的做法是结合 flex 流式布局与 min-width: 0 截断长文本：
立即学习“前端免费学习笔记（深入）”；
- 外层
<nav></nav>设display: flex，子项<ol></ol>或<ul></ul>设display: flex并加flex-wrap: wrap - 每个
<li>加min-width: 0，再对内部链接设overflow: hidden、text-overflow: ellipsis、white-space: nowrap - 分隔符用
::after插入，并设flex-shrink: 0防止被压缩变形
示例关键样式：
li { min-width: 0; }
li > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
li:not(:last-child)::after { content: "/"; flex-shrink: 0; margin: 0 8px; }
flex 布局下分隔符间距错乱，怎么微调对齐？
当用 gap 控制项间距时，分隔符若用伪元素插入，就和 gap 叠加，造成视觉过宽。尤其在响应式缩放时，固定像素的 margin 显得僵硬。
解决思路是把分隔符“收编”进布局流，而不是额外叠加：
- 去掉伪元素的
margin，改用gap: 8px控制所有项间距，再把分隔符作为独立<li>插入（需 JS 或服务端配合） - 如果坚持用伪元素，建议用
em或ch单位设margin，比如margin: 0 0.5em，随字体缩放自然调整 - 注意
line-height影响垂直对齐：分隔符默认按基线对齐，可加vertical-align: middle或设line-height: 1统一高度
IE11 下伪元素分隔符失效或错位怎么办？
IE11 对 ::before/::after 在 flex 子项中的渲染有 Bug：有时不触发、有时尺寸为 0、有时脱离文档流。
兼容方案不是降级回背景图，而是用最简 fallback 结构：
- 用
<span class="separator">/</span>替代伪元素，配合display: none/display: inline控制显隐 - 对 IE11 单独加 hack：
@supports not (display: flex) { .breadcrumb li .separator { display: inline; } } - 避免在 IE11 中依赖
flex-grow分配空间，改用width: auto+max-width组合控制伸缩
真正麻烦的不是写法，而是“自适应”在小屏上要不要折叠中间项——这得靠 JS 监听容器宽度做截断，纯 CSS 做不到动态省略逻辑。
