浮动：对；导致元素在 iPhone/iPad 上的容器外破坏的元素

Posted 2023-03-12

【中文标题】浮动：对；导致元素在 iPhone/iPad 上的容器外破坏的元素

【英文标题】：Float:right; elements causing elements to break outside of containers on iPhone/iPad

【发布时间】：2012-09-27 16:28:20

【问题描述】：

我正在尝试修复我的网站上发生在 iPhone 和 iPad 上的错误。

您可以在此处查看该页面： http://revivelab.com/demo_sites/iphoner/

这就是我所指的中断：

当你将它加载到 iPhone 上时，它起初看起来还不错，但如果你放大，元素会弹出到它们包含的 div 之外。

棕色/卡其色背景应用于宽度为 100% 的 div，然后将宽度为 1024px 的 div 置于其内部并居中，蓝绿色框位于该 div 内部。当它破裂时，它甚至会在 100% 宽度的容器之外破裂。

以前有人遇到过这种情况吗？有什么解决方案的想法吗？

【问题讨论】：

您是否尝试将#content 设置为1024px;？它是1014px。

是的。它是 1014px，因为它有 10px 的 padding-left。

【参考方案1】：

问题似乎来自于父元素大小与大多数移动浏览器中的默认视口大小不匹配。

iPad 和 iPhone 的默认视图空间默认为模拟 980px 宽度，您分配给元素的最小尺寸为 986px，它的子元素 #content_container 的宽度为 100%。

现在 #content 元素的计算宽度为 1024 像素，带内边距（大于父最小值）。

然后 .content_left 元素的实际宽度为 1024 像素，超出其父级实际宽度 1014 像素。

所以在我看来，您需要将这些尺寸进行网格化。我有两个选择可以解决这个问题。

(1) 将#content 和 .content_left 元素的尺寸缩小到970px，将标签的最小尺寸缩小到980px。

(2) 添加一个视口元标记来简单地将页面扩展到您最终得到的 1034 像素宽度之外

<meta name="viewport" content="width=1034">

我希望这会有所帮助。

【讨论】：

非常感谢马格努斯！这两种解决方案都有效，我非常感谢您对所发生的事情的详细解释。再次感谢！