Chrome中使用width与max-width时子元素宽度异常问题

问题概述 #

开发移动端优先的响应式网站时，父容器设为width:100%，子元素.land-background-vedio配置width:100%和max-width:540px，预期实现窄屏固定宽度、宽屏自适应的效果。该设置在Firefox中正常生效，但Chrome中出现子元素缩放异常，宽度未按预期保持540px。

修复方案 #

修改.land-background-vedio的CSS定位逻辑，替换原有的left:50%+transform: translateX(-50%)居中方式，改用margin:0 auto结合left:0、right:0实现水平居中，同时保留宽度约束：

.land-background-vedio{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 540px;
    margin: 0 auto; /* 水平居中 */
    box-shadow: 0 7px 29px 0 rgb(100 100 111 / 20%);
    z-index: 0;
}

原因分析 #

Chrome渲染引擎在处理**fixed定位元素同时设置left:50%、transform: translateX(-50%)、width:100%和max-width**时，布局计算逻辑与Firefox存在差异：transform会干扰元素的原始宽度计算，导致max-width的约束失效，元素被错误缩放。

改用margin:0 auto+left:0;right:0的方式，能让fixed元素在视口范围内自动水平居中，同时正确继承父容器的宽度约束，确保width:100%和max-width:540px在各浏览器中一致生效。

验证要点 #

• 确认全局已启用box-sizing: border-box（你的代码中已设置，无需修改）
• 保留视频元素的object-fit: cover，确保视频内容正确填充容器

内容的提问来源于stack exchange，提问作者AndresChica