iPhone 忽略响应式布局上的正文边距答案

【问题标题】：iPhone is ignoring body margin on Responsive LayoutiPhone 忽略响应式布局上的正文边距
【发布时间】：2012-04-27 04:32:19
【问题描述】：

我们的响应式设计存在问题。我们在响应式主题上将这种风格用于移动设备：

body {
    margin-left: 10px;
    margin-right: 10px;
    overflow-x: hidden;
    max-width: 90%;
}

您可以在下面看到 iOS Broswer 和 Chrome 之间的区别：

【问题讨论】：

【解决方案1】：

对你的 body 应用边距是没有意义的，因为它是最外层的元素。相反，您应该使用填充。

【讨论】：

使用这个：body { padding-left: 10px; padding-right: 10px;溢出-x：隐藏；最大宽度：90%；边距：0 自动； } 我得到了同样的结果。

【解决方案2】：

根据这篇古老的博文Body padding and margin，不同的浏览器会以不同的方式处理body元素上的margin和padding。如果这种差异今天仍然存在，我不会感到惊讶。

【讨论】：

【解决方案3】：

它适用于百分比：

body { margin-left: 5%; margin-right: 5%; overflow-x: hidden; max-width: 90%; margin: 0 auto; }

【讨论】：