移动端屏幕下DIV意外水平偏移及相关显示问题排查

问题根源 #

1. 盒模型计算错误：默认box-sizing: content-box规则下，width:90%加上padding:2% 4%后，元素实际宽度会超出父容器（body）的100%，触发横向滚动条，导致元素视觉上偏移。
2. iframe宽度溢出：移动端屏幕宽度小于370px时，固定宽度的iframe会撑开父容器bottomBox，进一步加剧横向滚动，导致左侧边框被移出视口。
3. RTL布局滚动行为：从右到左的布局中，横向滚动会优先隐藏左侧内容，这是底部DIV左侧边框消失的直接原因。

修复步骤 #

• 全局设置box-sizing: border-box，让元素宽度包含padding和border，避免宽度溢出
• 给iframe设置最大宽度为100%，确保不会超出父容器
• 优化边框写法，合并简写属性
• 移除冗余的align="center"属性，用CSS统一控制居中

修复后的完整代码 #

<?php if (isset($_REQUEST['submitClicked'])) $status = "submitClicked"; ?>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        direction: rtl;
      }
      #topBox {
        width: 90%;
        margin: 0 auto;
        border: 1px solid;
        padding: 2% 4%;
        text-align: center;
      }
      #bottomBox {
        width: 90%;
        margin: 1rem auto 0;
        border: 1px solid;
        text-align: center;
      }
      #bottomIframe {
        width: 100%;
        max-width: 370px;
        height: 520px;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div id="topBox">
      <form method="post">
        <input type="hidden" name="submitClicked" id="submitClicked" value="1" />
        <p style="height:500px; background-color:red;">&nbsp;</p>
        <input type="submit" value="Submit" />
      </form>
    </div>
    <?php if ($status=="submitClicked"):?>
    <div id="bottomBox">
      <iframe src="https://direct.tranzila.com/hofesh/iframenew.php"
        name="bottomIframe" id="bottomIframe"></iframe>
    </div>
    <?php endif ?>
  </body>
</html>

关键修改说明 #

• * { box-sizing: border-box; }：统一盒模型，避免padding/border撑宽元素
• meta viewport添加initial-scale=1.0：确保移动端初始缩放比例正确
• #bottomIframe设置width:100%; max-width:370px：自适应小屏幕，同时保留最大宽度限制
• 合并border属性为简写形式，减少冗余代码
• 用CSS的text-align: center替代HTML的align属性，符合现代布局规范

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