CSS 未正确定位 - Safari

Question

我有一个网页有两个 div，一个在左边，一个在右边。我已经使用 float: left/right; 定位了这些位置。

在 FireFox、IE（包括 IE6！！！）和 Chrome 中一切正常。但出于某种原因，在 Safari 中，右手边的 div 出现在左手边的 div 下方。所以，我在 div 周围放置了一个边框，我注意到仅在 Safari 中，右手 div 认为它是另一个 div 的一部分。我检查了页面的 div 和关闭 div，一切看起来都不错。

我也有点困惑为什么它可以在 Chrome 中运行而不是在 Safari 中运行。这两个浏览器都是Webkit浏览器吗？？

所有帮助表示赞赏

Answer 1

执行大多数左/右 div 的“最普遍接受”的方法是将两个 div 向左浮动，然后立即清除浮动。最简单的清除方法是在两个 div 之后立即添加一个 div，如下所示：

<div style="clear:both"></div>

这将确保浮动元素之后的任何内容都不会被浮动属性碰撞，这些属性将贯穿始终，直到它们关闭。

现在，一些浏览器存在边距/填充问题（主要是 IE）。暂时分配一个背景（如果已经没有）和一个比你预期需要的更小的宽度——即，如果你想要两个都占屏幕 50% 的 div，为这两个 div 分配一个 48% 的宽度测试目的。现在，这能解决问题吗？如果是这样，Safari 可能会对这些 div 上设置的浮动/边距产生负面反应。调整边缘和填充，冲洗，重复。

主要内容浮动 div 可能会在匆忙中变得一团糟，尤其是当您尝试 100% 访问父级或屏幕时。您可以使用 css reset 或我个人最喜欢的网格系统（如960.gs）轻松解决此问题， 否则，您只能进行任意调整，a) 仅在 --most-- 浏览器中看起来不错或 b) 使用痛苦的浏览器特定样式表。不用谢！