必须为菜单项设 position: relative，气泡箭头才准确定位；用 top: 100% 比 bottom: -10px 更可靠；悬停闪动主因是菜单项与气泡间存在间隙，需用 padding-bottom 或 calc(100% + 2px) 配合负 margin 修复。
气泡箭头用 ::before 还是 ::after？选哪个不重要，但必须和父元素共用定位上下文
气泡箭头本质是伪元素生成的三角形，::before 和 ::after 都能实现，关键在于它们都依赖父容器设了 position: relative。如果菜单项本身没定位，伪元素会相对于 body 或最近的定位祖先偏移，导致箭头飘走。
- 菜单项（如
<li>或<button></button>）必须显式加position: relative - 伪元素设
position: absolute，再用top/left微调位置 - 别指望
display: inline-block自动创建定位上下文——它不会 - 箭头方向（上/下/左/右）由
border的哪三边设为透明决定，不是靠transform旋转
top: 100% 和 bottom: -10px 哪个更适合气泡定位？
用 top: 100% 更可靠。它让气泡顶端紧贴菜单项底部，不受菜单项自身 padding 或 line-height 影响；而 bottom: -10px 这类固定值在字体缩放、响应式换行或不同设备上容易错位。
- 气泡垂直对齐菜单项中心时，优先用
transform: translateX(-50%)配合left: 50%，而非硬算left: 20px - 如果菜单项高度动态（比如多行文字），
top: 100%+margin-top: 4px比固定top: 40px更健壮 - 移动端需额外加
@media (max-width: 768px)调整气泡font-size和padding，否则小屏下文字挤出框外
悬停气泡闪动（flicker）的根本原因和解法
闪动通常是因为鼠标从菜单项移到气泡时，中间有像素空隙，触发了 :hover 离开又进入。这不是 CSS 动画问题，而是布局缝隙。
- 给菜单项加
padding-bottom: 8px（比气泡上边距略大），物理填补悬停断层 - 或者把气泡的
top设为calc(100% + 2px)，再用负margin-top: -2px把气泡向上拉回，视觉无缝，鼠标路径不断开 - 避免用
opacity: 0 → 1配合transition单独控制显示隐藏——这会让气泡脱离文档流，加剧闪动 - 真要加动画，用
visibility: hidden → visible+opacity双控，且visibility不触发重排
IE11 下伪元素气泡不显示？检查这三点
IE11 对伪元素的 content 和定位兼容性差，不是所有写法都生效。
立即学习“前端免费学习笔记（深入）”；
-
content必须是非空字符串，content: ""可以，content: none不行 - 伪元素若只设
border无宽高，IE11 可能渲染失败，补一句width: 0; height: 0; - 避免在伪元素上用
transform: translateZ(0)强制硬件加速——IE11 会直接忽略整个伪元素 - 如果用了
flex布局菜单，IE11 对align-items和伪元素的交互不稳定，降级用vertical-align: middle+inline-block
position: relative，以及气泡和菜单项之间那不到 1px 的间隙。这两点不解决，其他样式调得再细也没用。 
