1

因此，我将网页的主体背景颜色设置为纯色，并让包含所有内容的内容 div 具有不同的背景颜色，并且宽度更小但高度为 100%（我'之前已经将 html 和 body 的高度和宽度设置为 100%）。在 chrome、firefox 和 IE10 中，它可以按照我想要的方式工作，两边各有两列颜色，中间有一个白框，内容所在的位置。然而，在 IE8 中，背景颜色在内容下方也是可见的，因此背景颜色在内容周围形成了一种 U，这不是我想要的。有任何想法吗？

body, html{
width:100%;
height:100%;
}
body {
    margin: 0px;
    color: #000;
    font-family: Corbel;
    font-size: 13px;
    line-height: normal;
    background-color: #d5e6c7;
    background-repeat: no-repeat;
    background-position: top;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
#wrapper {
    width: 940px;
    height:100%;
    background-color:#FFF;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left top;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
}

这是一些 css 代码，不知道您是否需要查看代码的任何其他部分。任何帮助表示赞赏。谢谢！

4

1 回答 1

0

好的，看看模板的布局是这样的：

<html>
<body>
    <div id="templatemo_body_wrapper">
        <div id="templatemo_wrapper">
            <!-- content -->
        </div>
    </div>
    <div id="templatemo_footer_wrapper">
        <!-- footer -->
    </div>
</body>
</html>

因此，如果您确实需要该布局的这种确切行为，那么看起来您将需要良好的旧填充 + 负边距 hack/trick/thing。

html, body { height: 100%; }
#templatemo_body_wrapper, #templatemo_wrapper { min-height: 100%; }
#templatemo_body_wrapper { overflow: hidden; }
#templatemo_wrapper {
    padding: 0 10px 2050px 10px !important;
    margin: 0 auto -2000px auto !important;
}

对我来说似乎在 IE8 中工作。试试看。

原始回复

我无法重现您描述的问题。

但是，您可能需要检查是否已在 HTML 文档的顶部声明了 DOCTYPE，如下所示：

<!DOCTYPE html>

不这样做会将 IE 发送到Quirks Mode。

我尝试在没有 DOCTYPE 的情况下渲染页面以触发 Quirks 模式，这导致白色部分不再居中。不确定这是否是您描述的问题。

于 2013-06-07T06:20:19.987 回答