CSS 在 Safari 和 Mobile 中看起来很时髦答案

【问题标题】：CSS looking funky in Safari & MobileCSS 在 Safari 和 Mobile 中看起来很时髦
【发布时间】：2018-01-21 11:28:10
【问题描述】：

以下是我的网站 (overrealmgame.com/Database) 中的两张图片，第一张来自 Chrome（它的外观），第二张来自移动设备。如您所见，白色不是在中间居中，而是锚定在左侧。知道什么 CSS 更改可以解决这个问题吗？谢谢。

Chrome Version

Mobile Version

CSS：

body {
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0 auto;
max-width: 1100px;
min-height: 800px;
padding: 2em 2em 4em;
background: rgba(1, 165, 45, 0.25);}

【问题讨论】：

可以分享 HTML 和 CSS 代码吗？

标签： javascript css google-chrome safari

【解决方案1】：

我认为问题出在 margin:auto 上。基本上在桌面上，两侧都有可用空间，因此边距使其居中。在移动设备上，没有任何可用空间，因此没有任何居中空间。看起来您的项目的大小也超过了父容器的大小。所有这些事情共同造成了问题。我看不到页面其余部分的样式，但看起来您的组件不是您认为的大小。我建议做的是打开您的开发工具并检查元素。它应该告诉您每个项目在屏幕上占用了多少空间以及项目的边距/填充。这应该可以帮助您开始了解为什么会发生这种情况。如果您从桌面使用移动版本进行调试，而不是从手机中实际打开它，这也会有所帮助。 Chrome 可以选择作为不同的设备进行查看。

【讨论】：