Question

我有一个问题，直到这个网站之前我从来没有过，我无法弄清楚问题。

我使用100％宽度的包装器构建我的网站;和一个容器设置为960px，边距为“0 auto”以使容器居中。

大多数时候（和这个一样）我有一个标题包装器/容器，主内容包装器/容器和页脚包装器/容器。

另外，我的身体设置为100％宽度和高度。

问题是我的标题包装器导致发生非常小的滚动，当我向右滚动查看时，页面的整个右侧似乎有20像素的边距。

我似乎没有在Chrome中遇到问题，只有IE和Firefox。

我的CSS在开头用这个清除：

body, div, dl, dt, dd, ul, ol, li,
 h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
 margin: 0;
 padding: 0;
}

我的主体样式设置为：

body {
float: left;
font-family: 'Verdana', 'Arial';
background: #E3E3E3;
width: 100% ;
height: 100%;
color: #5B5B5B;
}

我有点尴尬地问这个，因为CSS错误通常是轻而易举的，但我不知道这个。至于其他包装器，正如我所提到的，它们都设置为：

wrapper { float: left; width: 100%; height: 100%;}
content {width: 960px; margin: 0 auto; }

有什么想法吗？这让我疯了！

Answer 1

首先尝试重置css。这就是我用来启动主样式表的方法：

* {margin:0;padding:0;outline:0;border:0;
-webkit-font-smoothing: subpixel-antialiased !important; text-rendering:optimizeLegibility;}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th,
td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

您需要重置样式才能解决此类错误。然后它是轻而易举的......

Answer 2

由于导致滚动条的空格为空，您可以强制该部分永远不会显示滚动条 -

overflow: hidden;

然后你可以继续这个项目＆amp;如果你愿意，可以稍后回来找出导致它的原因。

水平滚动条CSS

2 个答案: