这个 CSS 设计的哪一部分在 IE 上打勾？

Question

我一直在尝试使用 CSS 实现两列布局，其中左列用于导航（不要对我持有垂直导航），右列用于内容。内容的长度各不相同，但总是比右栏导航长。我的目标是至少在

我看到有 other questions 的目标有点相似，这就是我找到 this article 的方式。

在尝试将它应用到我的设计之后，我想出了一些我认为可行的方法。

jsfiddle 在这里：http://jsfiddle.net/FVsSV/2/

相关 HTML：

<div id="mainCont">
<div id="sidebar">
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit ag</a>
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit a</a>
</div>
<div id="content">
    <div id="padding-wrapper">
        <h1>uris et lorem gravida condiment</h1>

        <h3 id="toc">apibus sit am</h3>
            Content content content...
    </div>
</div>
</div>

相关CSS：

#mainCont {
  background-color: #000;
  overflow: hidden;
  padding-left: 148px; /* The width of the rail */
  height:1%; /* So IE plays nice */
}



#sidebar {
    display: inline;
  background-color: #9BBCE4;
  width: 148px;
  float: left;
  margin-left: -148px;
}


#sidebar a {
    display: block;
    padding: 15px 0px;
    font-size: 1.1em;
    text-align: center;
    color: #2C2C2C;
    text-decoration: none
}

#sidebar a:hover {
    background-color: #4e88ce;
    color: #FFFFFF;
}

#content{
    background-color: #FFFFFF;
  width:100%;
  border-left: 148px solid #9BBCE4;
  margin-left:-148px;
}

#padding-wrapper {
    padding: 30px 30px;
}

/* content formatting*/
#content h1 {
    font-size: 1.5em;
    margin: 15px 0px 20px 0px;
}

/* content formatting END*/

它在 FF8 和 IE8 中看起来还不错，但是当我在 IE 7 和“兼容性视图”中检查它时，它看起来很乱，我不确定原因是什么，或者是否可以轻松修复。

我是否缺少明显的东西，或者这种方法不值得为 IE6-7 兼容性尝试？

Answer 1

我认为您可以在#content 上删除您的width: 100%，它会在 IE7（和其他浏览器）中正​​常工作。

Answer 2

我相信这与 IE7 如何处理特定宽度和负边距有关。如果我错了，请纠正我，但 IE7 不会遇到与 IE6 相同的盒子模型问题，但它仍然不能完全正确。 （也许它确实有同样的盒子模型问题，这就是它的表现？）当你在容器上设置填充时（就像你对padding-left:148px所做的那样），IE7错误地将其添加到子对象使用的相对宽度中。然后，当您使用width:100% 设置子对象时，您最终会得到一个太宽而无法放入父对象提供的空间的子对象。

sidebar 首先出现在 HTML 中并浮动，content 应该围绕它流动，但由于 IE7 认为它对于容器来说太宽，它会强制它在浮动对象之后的第一行。 @Scott 是正确的 - 如果您从 content div 的 CSS 规则中删除 width:100%，它会在 IE7 中正确流动。 （不过，我无法在 IE6 中亲自验证这一点。）

当然，我们应该从中学到的（除了使用 IE 带来的麻烦）是负边距会导致一些奇怪的行为，并且在大多数情况下应该避免。话虽如此，但您对两列布局的方法很有趣，其中较短列的背景与较长列的高度相匹配。