最大宽度似乎不适用于safari

Question

我将只包括小提琴，因为它是一个很长的代码（道歉，因为我包括了整个代码），我的问题只是在safari中，两列没有采用800px的全宽度。在其他浏览器中一切正常。我尝试使用width: 100%;但是后边距被丢弃了。此外，我认为我可以使用类似width: 97%的内容，但必须有其他一些解决方法。请帮助，提前谢谢！

Here is the fiddle.

以下是Safari vs firefox的结果。

---

的Safari

---

火狐

Answer 1

将width: 97.5%;（780px）添加到#main-content-wrapper并保留1.25％（每边10px边距），这使其达到800px的总和。因为当您定义width: 100%;（它将占用整个800px）和额外的边距时，将在右侧牺牲填充。看看 *link *

我已经添加了5％的填充物，它也会在右侧牺牲，而它在左侧保持完整。这是一个CSS规则。

SEE THE DEMO

#main-content-wrapper {
    max-width: 800px;
    width: 97.5%;
    margin: 1.25%;
}

Answer 2

适用于Safari 5.1。 CSS中的max-width属性用于设置指定元素的最大宽度。 max-width属性会覆盖width属性，但min-width将始终覆盖max-width，无论是在声明中宽度之前还是之后