必须用 display: flex 或 flex-direction: column 实现图标文字对齐，禁用 vertical-align；图标推荐内联 svg，文字与图标需同属一个可点击元素（如 button），并确保点击热区≥44×44px。
底部 fixed 导航条里怎么放图标+文字
直接用 <i></i> 或内联 <svg></svg> 嵌在导航项里就行，但必须配合 display: flex 或绝对定位，否则图标和文字会错位、换行或对不齐。
常见错误是把图标当纯文本塞进去（比如 <span>?首页</span>），结果 iOS Safari 里图标字体加载失败就只剩“首页”，或者安卓上图标被截断。
- 推荐用内联
<svg></svg>：体积小、可缩放、不依赖字体加载，加display: block; margin: 0 auto;防止 inline 对齐漂移 - 如果坚持用 Unicode 图标（如 ?），得设
font-family: system-ui, -apple-system, sans-serif;，避免某些系统渲染成方块 - 别给图标设
vertical-align: middle——父容器没line-height参照时无效；改用flex: 0 0 auto+align-items: center更稳
图标在上、文字在下怎么居中对齐
这种上下结构不是默认行为，flex-direction: column 是最简解法，比 absolute 定位更可靠，尤其在动态高度或字体缩放场景下。
错误做法是给图标设 top: 0、文字设 bottom: 0 —— 这要求按钮有固定 height，且一旦内容变多（比如文字换行）就会崩。
- 按钮本身设
display: flex; flex-direction: column; justify-content: center; align-items: center; - 图标和文字分别包在
<div> 里，不设宽高，靠 flex 自动撑开间距 <li>加 <code>gap: 4px控制上下距离，比用margin更干净，不会影响外边距塌陷 - 若需兼容老浏览器（IE11），改用
padding-top+text-align: center，但图标得转为背景图 - 绝对不要在底部
nav或footer里直接放表单控件 - 真要收用户反馈，点按钮后弹出 modal，把 input 放进 modal 内部，modal 用
position: fixed但脱离底部栏 DOM 结构 - 若必须嵌入，加
ontouchstart="this.focus()"强制聚焦前滚动到可视区，但仅作降级，不能根治 - 整个导航项用
<a href="#"></a>或<button type="button"></button>包裹，确保语义和可访问性双达标 - 图标和文字都设
pointer-events: auto（默认值），别意外继承父级的none - 用
min-height: 48px+padding: 12px 0保证点击热区 ≥ 44×44px，比调font-size更有效
为什么 fixed 底部栏里放 input 就出问题
iOS Safari 键盘弹出时，会强制重算视口高度，而 position: fixed 元素若内部含 <input> 或 <textarea></textarea>，大概率触发页面上浮、定位错乱，甚至卡死。
这不是 bug，是 WebKit 的已知行为：键盘唤起 → 视口缩小 → fixed 元素按新视口重新定位 → 但输入框焦点又拉回原位置 → 循环抖动。
移动端点击区域太小，图标+文字一起点不了
图标和文字分属不同元素（比如 <svg></svg> 和 <span></span>），但用户实际想点的是整个导航项——这时候只给文字加 click 事件，图标区域就成“盲区”。
更隐蔽的问题是：CSS 里设了 pointer-events: none 在图标上（为了透传点击），却忘了文字也跟着失效。
真正难的不是让图标和文字排齐，而是让它们在键盘弹起、横竖屏切换、字体放大、屏幕阅读器聚焦这些边界条件下依然可用。fixed 布局的“固定”是假象，它只对视口固定，对用户操作流并不固定。
