左右DIV部分不适用于Safari

Question

问题的并排图片：

我的网站是http://berathen.com 出于某种原因，一切看起来在IE，Firefox和Chrome中运行得很好，但在Safari中却没有。出于某种原因，我的左右div部分在中心连接在一起。

#leftSide
{
  position: relative;
  left: -350px;
  max-width: 320px;
}

#rightSide
{
  position: relative;
  left: 650px;
  width:0px;
  height:0px;
}

非常感谢任何帮助或建议！

Answer 1

我花了几分钟时间在旧版的safari中检查你的网站。

当我尝试将left:0应用于#outerBox2内的#leftSide时，它又会将右侧框放到左侧，这时我注意到您的HTML }无效 - 您有多个标识为outerBox2的元素（ id在文档中应该是唯一的，您可以使用类来应用常见内容）。

我认为导致问题并解决问题可能会解决问题。

无论如何，在检查时我注意到的其他几件事情（可能会或可能不会帮助你）......

• div#leftSide的内容为position:fixed，因此其高度为0px。你甚至可能不需要它。
• 您已将width和height equla手动应用于0。我想知道为什么！ （你可能不需要那么......？）
• 中间的内容没有容器或包装器。如果它有一个，则可以很容易地将padding或margin应用于两侧并绝对定位左右内容或分别浮动它们left和right。

旁注：通过看到这一切，我想知道它在现代浏览器中是如何工作的......我只是说他们对你太善良......：）

Answer 2

这是你可以做的：

#leftSide {
    position: absolute;
    left: 0;
    max-width: 320px;
}

如果left为position，我认为safari不会选择负relative。