移动端浏览器与Chrome F12调试显示不一致：复选盒布局异常

问题背景 #

Chrome浏览器F12移动端调试（模拟iPhone XR）时，多个复选框能正常横向排列；但在iPhone真机上，复选框却纵向换行，未遵循设置的display: inline-block规则。

代码片段 #

HTML #

<div class="checkboxContainer">
    <label><input type="checkbox" id="checkbox1">label1</label>
    <label><input type="checkbox" id="checkbox2">label2</label>
</div>

CSS #

@media (max-width: 700px) {
    .checkboxContainer {
        display: inline-block;
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
    }
    .checkboxContainer label {
        white-space: nowrap;
    }
}

显示差异 #

• Chrome调试效果：两个复选框及对应label横向排列在同一行
• iPhone真机效果：两个复选框及对应label分别单独占据一行，纵向排列

问题原因 #

Safari（iPhone默认浏览器内核）对inline-block容器内部的inline元素排版逻辑与Chrome不同：.checkboxContainer设为inline-block后，其宽度由内容自动撑开，但Safari未正确识别内部label的横向排列需求，加上label默认是inline元素，在窄屏环境下触发换行。

修复方案 #

方案1：为label添加inline-block属性 #

@media (max-width: 700px) {
    .checkboxContainer {
        display: inline-block;
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
    }
    .checkboxContainer label {
        white-space: nowrap;
        display: inline-block; /* 强制label为块级行内元素 */
        margin-right: 15px; /* 可选：添加间距优化视觉效果 */
    }
}

方案2：改用Flex布局（更推荐，跨浏览器兼容性更好） #

Flex布局是现代移动端布局的标准方案，能在所有主流浏览器（包括Safari）中保持一致的排版效果：

@media (max-width: 700px) {
    .checkboxContainer {
        display: flex; /* 替换inline-block为flex */
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
        gap: 15px; /* 控制两个复选框组的间距 */
    }
    .checkboxContainer label {
        white-space: nowrap;
    }
}

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