1

我的档案和搜索页面右侧有填充，我相信它与我的 body 元素有关，但是我不太确定这些页面与网站上的其他页面有什么不同，这些页面都很好风格明智，因为它们都使用相同的格式。这是一个wordpress网站。正如我所说，它只发生在这个页面和搜索页面以及所有其他页面都很好，所以我对它在做什么感到困惑。

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }

body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}

header { width: 960px; height: auto; margin: 0 auto; display: block;}

#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}

aside { width: 260px; height: auto; float: left; position: relative;}

#main { width: 650px; height: auto; float: right; position: relative;}

#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }

如果您减小窗口的大小，您会注意到页面底部的滚动条出现，然后右侧的填充开始形成。如果你让你的窗口更大，那么填充空间就会消失，底部的滚动条也会消失。我是否以任何方式限制了我的身体标签以使这种情况发生？

我已经查看了这个，但我已经定义了最小宽度。 当浏览器调整为较小的窗口时，网站的页面右侧有奇怪的空白

4

2 回答 2

3

在style.css第 108 行的文件中，width从标题标记中删除该属性以修复水平滚动条问题。

固定的CSS：

header { height: auto; margin: 0 auto; display: block;}

为了查看，Firefox 浏览器中的 3D 视图将标题显示为灰色条，这是您问题的根源。创建文本的其他样式不受影响。 在此处输入图像描述

提示：右键单击上面的图像并在新选项卡中查看以查看原始大小。

于 2012-06-26T10:17:28.160 回答
0

啊，如果我正确理解您的问题，似乎是 tag header，特别是它的 style width: 960px，是造成这种特殊情况的原因。标题周围的包含 div #main，只有width: 650px. 结果，标题的多余宽度会导致它超出 div 的边缘。

它似乎只在较小的屏幕宽度上显示为填充的原因是因为包含所有内容的 div#container以它的边距为中心 - 所以在浏览器变薄之前，超宽标题的效果不会变得明显足以使其右边缘开始与标题的右侧重叠。

我建议不要通过仅从width: 960px标题样式中删除标题来解决此问题（这可能会弄乱实际需要标题标签宽度的网站），而是建议为所有有问题的标签添加一个覆盖类，可能在.archive-header { width: auto; }. 但我想解决方案取决于您，因为您可能比我更了解该网站。

我希望这有帮助！（我真的这样做了，否则你会白白读完这一切！对不起，如果你读了......）对于未来，尝试下载Firebug for Mozilla Firefox，它有一个方便的元素检查器，可以让你玩转样式元素，看看什么有效。它应该可以帮助您自己发现这些类型的问题，以便您可以更快地解决它们。

于 2012-06-22T13:52:08.833 回答