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，请为测试目的分配48％的宽度。现在，这是否解决了这个问题？如果是这样，Safari可能会对这些div上设置的浮点数/边距做出负面反应。调整边距和填充，冲洗，重复。

主要内容浮动div可能会匆忙变得一团糟，特别是如果你试图100％的父母或屏幕一般。您可以通过css重置或我个人喜欢的方式轻松获得此类网格系统，例如960.gs。否则，您可以随意进行任意调整，a）在--most--浏览器或b中看起来不错）使用痛苦的浏览器特定样式表。不，谢谢！

Answer 2

试试这个，它会解决你的问题

＆＃13;

.container{ clear:both}
.container .label-info {  float:right; position:relative; min-width:100px;}
.container label {  float:left;}

＆＃13;

<div class="container">
  <div class="label-info">Right side</div>
  <label>My Label</label>
</div>

＆＃13;

CSS无法正确定位 - Safari

2 个答案: