唯一稳定方案是position: fixed + display: flex + 显式宽高；fixed元素脱离文档流，未设宽高的flex容器实际尺寸常为0，导致图标堆在左上角、不可点击，必须显式设置width和height。
flex容器没设宽高，图标堆在左上角
fixed元素脱离文档流，Flex容器又没显式声明width和height，实际渲染尺寸常为0——图标就挤在视口原点，点都点不到。这不是对齐问题，是容器根本没占空间。
- 必须给工具栏容器设
width（如width: 60px）和height（如height: 240px），不能靠子项撑开 -
flex-direction: column要明确写，否则默认横排，按钮全挤成一行 - 按钮自身用
flex: 0 0 auto，防SVG被拉伸变形 - 别同时写
right: 24px又加justify-content: flex-end——定位值和Flex对齐逻辑冲突
SVG没脱离行内流，baseline干扰对齐
SVG默认是inline元素，受vertical-align: baseline拖拽，align-items: center只能按这个错位后的盒模型居中，看起来永远偏下或浮高。
- 给
<svg></svg>加display: inline-block或display: block - 删掉所有
vertical-align相关设置，包括父容器的font-size: 0这类补救 - SVG必须显式写
width、height和规范viewBox="0 0 W H"（如viewBox="0 0 24 24"） - 避免用
margin: auto——Flex下无效，还可能触发渲染异常
gap不生效，图标和文字紧贴着
gap只对Flex容器的直接子元素生效。如果图标和文字写在同一个<span></span>里，它们根本不是独立flex项目，gap压根不起作用。
- 结构必须拆开：
<button><i class="icon"></i><span>保存</span></button>，而不是<button><i class="icon"></i>保存</button> - 伪元素
::before不算DOM节点，gap同样无效，得换成真实元素 - 搭配
align-items: center一起用，解决高度差异导致的视觉错位 - 移动端需兼容IE11时，去掉
gap，改用margin-inline-end: 4px
iOS Safari里按钮抖动或跳位
iOS Safari对position: fixed + display: flex组合渲染不稳定，软键盘弹出或快速滚动时，按钮会瞬间跳到顶部或底部——这不是bug，是WebKit视口锚点重计算延迟的表现。
- 容器必须加
will-change: transform，触发硬件加速，大幅缓解抖动 - 避免同时设
top/bottom和transform: translateY()，叠加使用反而加重跳变 - 按钮统一设
width: 100%和固定height（如height: 48px），别靠文字撑开 - 检查computed样式里容器的
width/height是否如预期——90%的“点不中”问题都源于这个值为0
margin-top或vertical-align——这些都在绕开真实问题。先确认容器有没有宽高、SVG是不是块级、结构是不是独立flex项目，比盲目加样式更省时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
