根本原因是斜杠或大于号被当作普通字符渲染，其字体度量与文字不一致；应统一设置vertical-align: middle、line-height，并用a:not(:first-child)::before生成分隔符。
用 / 或 > 作为分隔符时，为什么文字对不齐？
常见现象是文字上下偏移、分隔符和文字基线错位，尤其在 Chrome 和 Safari 中明显。根本原因是浏览器默认把斜杠或大于号当作普通文本字符渲染，其字体度量（如 vertical-align、line-height）和周围文字不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给分隔符元素统一设置
vertical-align: middle，避免依赖默认 baseline - 确保所有子元素（包括分隔符）使用相同
line-height，比如设为1.5或具体像素值（如24px） - 不要用纯文本写分隔符（如直接写
>），改用::before伪元素生成，便于样式隔离
用 ::before 伪元素添加分隔符，怎么控制只在中间项前显示？
关键在于利用 CSS 的兄弟选择器跳过第一个链接，同时避免最后一个链接后多出一个分隔符。直接用 a + a 会选中所有后续 a，但我们需要的是「第二个及之后的每个 a 前面加符号」。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把分隔符放在每个
a的::before里，然后用a:not(:first-child)::before控制显示 - 记得给
::before设置content: "/"和display: inline-block（否则可能换行或对齐异常） - 如果用 SVG 或图标字体，优先用
background-image替代content，避免字体加载失败导致空白
示例片段：
a:not(:first-child)::before {
content: "/";
margin: 0 8px;
vertical-align: middle;
}
想用箭头图标（如 ➜）替代斜杠，字体兼容性怎么处理？
Unicode 箭头（如 ➜ 对应 →）在多数系统里能显示，但 Windows 上旧版宋体、某些嵌入式浏览器可能 fallback 到方框或缺失。这不是 CSS 能完全解决的问题，得配合字体声明兜底。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式指定无衬线字体栈，例如
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif - 避免依赖单一 Unicode 字符，可用
background-image: url(arrow.svg)替代，SVG 尺寸可控、缩放无损 - 若坚持用字符，可加一层
@supports (font-variation-settings: normal)检测，但实际意义不大；更务实的做法是测试目标用户环境（如企业内网常用微软雅黑，没问题）
响应式面包屑里分隔符换行了，怎么防止断行？
当容器变窄，浏览器可能在分隔符处折行，比如「首页 / 产品 / 详情」变成「首页 / 产品
/ 详情」。这不是 bug，而是 / 被当成允许断行的普通字符。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给整个面包屑容器加
white-space: nowrap，但注意这会让超长文本溢出，需配合overflow: hidden或省略号 - 更推荐给分隔符本身加
white-space: nowrap—— 实际上只需包裹分隔符的span或伪元素设display: inline-block，它天然不换行 - 如果用了
flex布局，确认没误设flex-wrap: wrap，且子项没触发最小宽度强制换行
vertical-align 和父容器的 line-height 不匹配时，调一上午都看不出哪错了。 
