【问题标题】:Margin: 0 auto on mobiles always sets margin background-color to element background-color边距:0 auto 在手机上总是将边距背景颜色设置为元素背景颜色
【发布时间】:2014-02-01 07:11:27
【问题描述】:

很难制定一个简短的标题。发生的情况是居中 div 的背景颜色延伸到屏幕的左右边缘,而 body 的背景颜色被忽略或覆盖。

我正在为这个document 使用第二十三主题。

它设置一个小于全宽的宽度,并使用 margin:0 auto 将内容 div 居中。

在我们在 Iphone 和 Android 上的应用程序的标准原生 Web 视图组件中,自动边距(左右)不会成为主体的背景色,而是白色。在内容 div 中的元素之间,正确的背景颜色会通过它们的边距显示。

此外,Android 上的 Chrome 显示相同的白边距。

两位领先的操作系统开发人员是否都决定他们各自的 -kits 应该这样做,或者发生了什么?请注意,CSS 验证器会引发数百个错误 - 好吧,从头开始编写合适的主题不在此项目的预算之内。

如果您可以链接到可以正常工作的网页,我可以让网络视图加载并检查。

【问题讨论】:

  • 这可能是 webview 的默认背景颜色。您是否尝试过更改 webview 的背景颜色?
  • 现在试过了,但没有帮助。我更改了居中 div 的背景颜色,在 Chrome Mobile 和应用程序的 Web 视图中,它都采用该颜色并将其一直延伸到显示器的左右边缘。

标签: android html iphone css wordpress


【解决方案1】:

background-color 设置在多个类上。

.entry-header, .entry-content, .entry-summary, .entry-meta {
    background-color: #ffffff;
    margin: 0 auto;
    max-width: 604px;
    width: 100%;
}

删除background-color,问题将得到解决。

【讨论】:

  • 是的,就是居中的元素。我关心的是它周围的身体的背景颜色,在左右边缘。简单地说,我想为 body 设置背景颜色,并为一些内部元素设置其他背景颜色。
  • 我也尝试将自动边距移动到外部元素,但无济于事。
  • 你可以在你的身体上设置一个背景颜色,但是你会看到左右两条细线。你是这个意思吗?那是因为你在 class .page 上设置的 boder
  • 不,我不是这个意思。请注意,页面现在已更改,并且我已经接受了将自动边距着色为与居中元素相同的背景颜色的这种行为。让移动网页的宽度稍小一些并带有不同颜色的“排水沟”的目标已被放弃。
猜你喜欢
  • 2014-12-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-20
  • 2017-08-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多