bottom: 0未贴底主因是iOS Safari地址栏隐藏导致视口高度动态变化，fixed定位仍按初始height计算；应使用env(safe-area-inset-bottom)、viewport-fit=cover及避免依赖window.innerHeight。
bottom: 0 为啥没贴底？
固定定位的 tabbar 没压到屏幕最底部，通常不是样式写错了，而是被「视口缩放」或「地址栏遮挡」干扰。iOS Safari 在页面滚动后会隐藏地址栏，导致 window.innerHeight 动态变化，但 position: fixed; bottom: 0 仍按初始高度计算，结果悬空。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
vh替代px：设bottom: env(safe-area-inset-bottom)（兼容 iOS 底部安全区） - 避免依赖
window.innerHeight做 JS 动态计算——它在 Safari 中不可靠，尤其横竖屏切换时 - 加
viewportmeta：确保<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
Tab项等分宽度不生效？
用 flex: 1 或 width: 25% 后发现 Tab 宽度不均，大概率是父容器没设 display: flex，或子元素存在默认 margin / padding / border 导致盒模型溢出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须显式声明
display: flex，且禁用换行：flex-wrap: nowrap - 子项统一重置边距：
margin: 0; padding: 0; box-sizing: border-box - 避免用
text-align: center居中文字来“模拟”等分——文字居中 ≠ 容器等宽 - 如果用 CSS Grid，直接写
grid-template-columns: repeat(4, 1fr)更稳
点击区域太小，手滑点不准
移动端最小可触控区域应 ≥ 44×44px，但很多 Tab 图标 + 文字组合后，实际可点区域只有图标本身，尤其在 iPhone 小屏上极易误操作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个 Tab 项设置
min-height: 44px和padding: 12px 0（上下留白撑高触控区） - 图标用
inline-block或background-image，别用<img alt="CSS布局实战之移动端底部Tab栏_固定定位与等分间距" >单独占行——它自带vertical-align: baseline，容易拉低基线造成点击偏移 - 禁用
user-select: none在整个 Tab 栏上——它有时会意外抑制触摸事件响应
iOS 微信里 fixed 失效或闪动
微信内置浏览器（X5 内核）对 position: fixed 支持不完整，尤其在快速滚动或键盘弹起后，Tab 栏可能消失、错位或抖动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 降级方案：检测 UA 是否含
MicroMessenger，改用position: absolute+ JS 监听scroll动态更新top（慎用，性能差） - 更可靠的是用
position: sticky+ 底部锚点容器（需父容器有明确高度，如min-height: 100vh） - 绝对不要在 Tab 栏内嵌
iframe或video——X5 对混合定位极其敏感
最麻烦的其实是安全区适配和 X5 的 fixed 行为差异——这两个问题叠加时，单靠 CSS 几乎无解，得靠 UA 判断 + 条件渲染不同布局。别指望一套样式走天下。
