内容中心大于css/html的问题

我注意到一个新的问题，以前工作没有任何问题，我不明白是怎么回事，以及如何解决它。

问题在这里。我习惯在我的网站中设置div居中:

<div id="banner">
     <div class="center">conter here is centered</div>
</div>

css:

#banner
{
  width:100%
}
.center
{
  width:900px;
  margin:auto;
}

div正确居中。问题是，当我调整网页浏览器(chrome, opera, firefox)的大小为916px;一个水平滚动条在900px的位置出现了。

它以前工作没有任何问题，现在停止了。为什么?

有什么建议吗?

谢谢,

请重置页面的默认边距和内边距。

html, body {
  margin: 0;
  padding: 0;
}

使用具有良好重置的reset.css将重置CSS中的所有浏览器差异。我推荐Eric Meyer的重置和HTML5的Doctor reset。

也不是一个好理由总是有width和padding或margin或border在一起。如果您同时使用它们，请添加:

box-sizing: border-box;

您是否从页面中删除了默认的margin和padding ?

html, body {
  margin: 0;
  padding: 0;
}

在Chrome的body标签有padding: 8px应用到它。这可能会导致它在916px?

通常，所有默认样式的css重置预先应用于文档以消除此类问题。这里有一些关于重置CSS主题的更多信息。

谢谢你的帮助。

我没有提到它，但当然我尝试了css重置。我还尝试重置HTML和BODY上的每个边距/填充，但这并不能解决问题。

我真正不明白的是，它几个月前还在工作，我百分之百确定。那么最近有什么变化?

我创建了一个例子(这不是真正相关的，因为你不能在JSfiddle上调整浏览器的大小，但请尝试一下):

(https://jsfiddle.net/2gjt4v3e/)

我添加了很多"br"，因为我注意到当网站有一定的高度时就会出现这个问题。例如，如果你用2行做测试，它可以工作，如果你用更多的内容(因此更大的高度)再次做测试，问题就出现了。

还有其他建议吗?

由于某种原因我忘记了这篇文章。

我总是设置一个重置，这不是边距/填充的问题。

认为,

相关内容