如何防止Div缩放时偏移却不影响窗口resize响应？

问题详情 #

• Chrome开发者工具模式下页面显示正常，但退出工具后，页面缩放时横幅区域的Div会向右偏移
• 触发偏移的缩放比例不统一：其他用户在约80%缩放时出现问题，本人在约67%缩放时遇到
• 具体现象：横幅内的文本偏离白色背景区域，视觉上像是缩放时自动添加了margin-left

已尝试的无效方案 #

通过WordPress自定义器添加了以下媒体查询CSS，但未解决问题：

@media only screen and (max-width:768px)
{ 
#et_builder_outer_content > div > div > div.et_pb_section.et_pb_section_1.hardware-hero.apartment-hero.hero-part.et_pb_with_background.et_section_regular.et_section_transparent > div > div > div > div {
    margin-left: -100px !important;
}
}

针对性解决方案 #

1. 修正容器盒模型与宽度设置 #

该问题多源于Divi布局在非整倍缩放时的像素计算误差，先确保容器盒模型正确：

.hardware-hero .et_pb_row {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

2. 重置文本容器的定位参数 #

直接针对偏移的文本容器强制清除异常margin/left值：

.hero-part .et_pb_column .et_pb_text {
    margin-left: 0 !important;
    position: relative;
    left: 0 !important;
}

3. 禁用浏览器文本缩放优化 #

部分浏览器的文本缩放优化会干扰Divi的响应式布局，添加以下CSS禁用：

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

4. 检查Divi模块后台设置 #

进入Divi编辑器，检查横幅模块的以下设置：

• 确认“间距”选项中未设置自适应的左内边距/外边距
• 查看“响应式”面板，确保桌面/平板/移动端的布局参数一致，无断点冲突

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