iOS Safari 中 bottom: 0 + position: fixed 失效是因滚动时视口重算及层叠上下文干扰；应设 body{height:100vh}、避免 transform 等触发新层叠上下文，并用 env(safe-area-inset-bottom) 适配刘海。
bottom: 0 + position: fixed 在 iOS Safari 上失效？
不是 CSS 写错了，是 iOS Safari 对 position: fixed 的滚动容器有特殊限制：当页面高度超过视口、且用户正在滚动时，bottom: 0 的元素可能被“钉”在错误位置，甚至短暂消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
加height: 100vh（非100%），强制视口高度锚定 - 避免在
fixed元素父级上设置transform、perspective或will-change，这些会创建新层叠上下文并干扰定位 - 在 iOS 上，用
viewport-fit=cover并配合env(safe-area-inset-bottom)补齐刘海/Home Indicator 区域
Tab 图标用 img 还是 background-image？
用 <img alt="CSS项目实战之移动端底部Tab栏_固定定位与图标布局" > 更可控——能直接响应 srcset、支持无障碍 alt、可被 JS 动态切换；而 background-image 在高对比模式下可能不显示，且无法通过 CSS filter 统一调色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个 Tab 项用
<button></button>包裹<img alt="CSS项目实战之移动端底部Tab栏_固定定位与图标布局" >，禁用默认样式：border: none; background: none; - 图标尺寸统一设为
width: 24px; height: 24px;，用object-fit: contain防止拉伸 - 选中态用
filter: brightness(1.2) saturate(1.3)替代换图，减少 HTTP 请求
active 状态靠 JS 切还是 :target？
:target 看似简洁，但只匹配 URL fragment（如 #home），无法响应点击后不跳转、或单页路由（如 /profile）的场景，实际项目中基本不可用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 监听
click，在event.target上加data-active="true"，CSS 用[data-active]匹配样式 - 避免直接操作
className，改用element.toggleAttribute('data-active')更语义化 - 如果用 Vue/React，状态应由组件自身管理，不要依赖 DOM 属性做判断逻辑
底部 Tab 被虚拟键盘顶起怎么办？
Android 和部分 iOS 版本中，position: fixed 元素在软键盘弹出时会被整体上推，导致 Tab 栏悬浮在半空——这不是 bug，是浏览器对「可视区域」的重新计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
focusin和focusout，对body动态加class="keyboard-open"，然后用body.keyboard-open .tabbar { transform: translateY(calc(-100vh + var(--vh, 1vh) * 100)); } - 用 JS 获取真实视口高度：
document.documentElement.clientHeight，存为 CSS 变量--vh，避免100vh在键盘弹出时失真 - 别用
resize事件监听键盘，它在多数安卓机上根本不触发
移动端 fixed 底部栏真正的难点不在写法，而在各种“滚动-聚焦-缩放-横屏-安全区”的组合态。一个没覆盖的 case，就可能让 Tab 栏卡在半路不动。留点余量，多真机测几次比补一堆 hack 更管用。
