全屏元素应设display: block或flex、position: fixed并绑定top/left/width/height:fullscreen中显式声明box-sizing: border-box移动端优先用webkit-playsinline模拟全屏。全屏元素的display和position怎么设才不“飘”全屏显示的元素比如弹层、视频播放器、模态框一旦用display: none或visibility: hidden临时隐藏再切回全屏时经常错位、尺寸异常甚至脱离视口。根本原因不是CSS没写对而是浏览器在全屏切换过程中会重置部分样式计算上下文——尤其当元素原本是display: inline或position: static时。实操建议立即学习“前端免费学习笔记深入”全屏前确保目标元素是display: block或display: flex避免inline类行为干扰尺寸计算显式设置position: fixed并绑定top: 0; left: 0; width: 100vw; height: 100vh别依赖100%——后者在嵌套相对定位容器里会失效如果用requestFullscreen()触发记得在fullscreenchange事件里重新校准transform或z-index否则旋转设备后可能偏移fullscreen伪类里哪些CSS属性会被强制覆盖浏览器对:fullscreen或::-webkit-full-screen等前缀版本有硬性限制部分属性即使写了也无效比如margin、float、vertical-align还有某些transform组合如带perspective的3D变换。更麻烦的是不同内核处理box-sizing的方式不一致——WebKit默认强制border-box而Gecko可能沿用元素原有值。实操建议立即学习“前端免费学习笔记深入”在:fullscreen规则里显式声明box-sizing: border-box避免padding/border撑出滚动条慎用transform: scale()做缩放全屏下DPR变化可能导致像素模糊优先用width/height配合object-fit控制内容所有z-index必须大于2147483647即MAX_SAFE_INTEGER否则某些浏览器如旧版Safari会降级为auto移动端video全屏时样式失控怎么办iOS Safari和Android Chrome对video/video全屏有独立渲染层此时你写的CSS几乎全部失效——:fullscreen伪类不触发width: 100%变成屏幕宽度而非父容器甚至background-color都可能被系统UI覆盖。这不是bug是平台强制隔离策略。 文心快码 文心快码Comate是百度推出的一款AI辅助编程工具