本文针对 rtl 页面中动态显示 iframe 后导致的容器水平偏移、居中失效及左侧边框不可见问题，提供基于 css 重置与盒模型优化的完整解决方案。

在响应式 Web 开发中，尤其是采用 direction: rtl（右向左书写方向）布局时，动态插入

核心修复原理

关键在于强制

iframe {
  display: block;
  width: 100%;
}

• display: block：使 iframe 不再受行内对齐影响，支持 margin: 0 auto 居中；
• width: 100%：确保 iframe 宽度严格继承父容器（#bottomBox 的 90%），避免因固有 width="370" 属性导致的溢出或缩放失真（尤其在小屏设备上）。

完整优化代码示例

以下为整合修复后的精简 HTML 结构（PHP 条件逻辑已保留，CSS 已内联便于说明）：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      direction: rtl;
      margin: 0;
      border: 0;
      padding: 0;
    }
    #topBox {
      width: 90%;
      margin: 0 auto;
      border: 1px solid #000;
      padding: 2% 4%;
    }
    #bottomBox {
      width: 90%;
      margin: 0 auto;
      border: 1px solid #000;
      padding: 0;
    }
    #bottomIframe {
      margin: 0 auto;
      border: 0;
      padding: 0;
      /* 关键修复样式 */
      display: block;
      width: 100%;
      height: 520px; /* 可选：显式声明高度，避免重排 */
    }
  </style>
</head>
<body>
  <div id="topBox">
    <form method="post">
      <input type="hidden" name="submitClicked" value="1">
      <p style="height:500px; background-color:red;"> </p>
      <input type="submit" value="Submit">
    </form>
  </div>

  <?php if (isset($_POST['submitClicked'])): ?>
  <div id="bottomBox">
    <iframe src="https://direct.tranzila.com/hofesh/iframenew.php"
            name="bottomIframe"
            id="bottomIframe"
            frameborder="0"></iframe>
  </div>
  <?php endif ?>
</body>
</html>

✅ 注意事项：移除 标签上的 width 和 height 属性（如 width="370"），改用 CSS 控制，确保响应式一致性；建议显式设置 frameborder="0" 替代已废弃的 border="0"；若需保持 iframe 固定宽高比，可结合 aspect-ratio 或 padding-top 技巧，而非依赖像素值；避免混用 align="center"（HTML4 属性，已弃用）与 CSS 居中，统一使用 margin: 0 auto + display: block。

通过上述调整，#bottomBox 将严格继承 90% 宽度并居中，iframe 自动填满其内容区，左侧边框完整可见，且在所有主流移动浏览器中渲染稳定。此方案轻量、兼容性好（支持 IE11+），是 RTL 场景下 iframe 布局问题的标准化解法。