容器 div 上的填充在 Google Chrome 中不起作用答案

【问题标题】：Padding on container div not working in Google Chrome容器 div 上的填充在 Google Chrome 中不起作用
【发布时间】：2012-02-24 19:43:37
【问题描述】：

我有一个固定宽度的居中模板，我想在“主”div 的左侧和右侧应用 10 像素的填充。这样在小屏幕上，网站就不会触及屏幕的左侧。它适用于 IE、Firefox、Safari、Opera，但不适用于 Google Chrome。

以下是相关代码：

<style type="text/css">
  #main {
    padding:0 10px;
  }
  #wrap {
    width:980px;
    margin:0 auto;
  }
</style>
<div id="main">
  <div id="wrap">
  </div>
</div>

我尝试了各种 css 组合，但没有成功。您可以查看实际页面here。（将来可能会改变！）

谢谢！

【问题讨论】：

标签： html css google-chrome cross-browser padding

【解决方案1】：

最好将min-width 定义为#main 而不是padding，如下所示：

#main {
    min-width:1000px;
  }

【讨论】：

这是一个更好的选择。我很快就会试试这个。我的代码有什么错误吗？还是您认为这是浏览器中的错误？
在 chrome 中试过这个但同样的问题。适用于其他浏览器。

【解决方案2】：

在这种情况下，它在任何浏览器中都不起作用，因为尽管出现了 10 像素的间隙，但页面实际上是横向滚动的。至少这是我在 Safari 和 Chrome 中的行为。

相反 - 您要使用的是最大宽度。这可以防止宽度超过 980px，但允许它使用 width:auto 直到该点。

#wrap {
    max-width: 980px;
    margin:0 auto;
}

max-width 兼容所有主流浏览器，包括 IE7+

您还应该查看 CSS 媒体查询以处理较小的屏幕尺寸： http://css-tricks.com/css-media-queries/

【讨论】：

谢谢！你是对的，但在我的情况下，谷歌浏览器甚至没有在两侧添加 10px 的间隙。