本文针对 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 布局问题的标准化解法。
