Question

免责声明：我已经多次在自己的脑海中解决了这个问题，但我怀疑我只是遗漏了一些明显的东西。

我一直在尝试使用CSS实现两列布局，其中左列用于导航（不要对我持有垂直导航），右列用于内容。内容的长度各不相同，但始终比右列导航长。我也瞄准至少优雅地降级＆lt; = IE7，如果我可以帮助它，就没有JavaScript。

我发现有other questions针对的是类似的事情，这就是我找到this article的方式。

在尝试将其应用于我的设计之后，我想出了一些我认为可行的东西。

jsfiddle here：http://jsfiddle.net/FVsSV/2/

相关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和“兼容性视图”中检查它时，它看起来很混乱，我不确定原因是什么或是否可以轻松修复。 / p>

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

Answer 1

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

Answer 2

我认为这与IE7处理特定宽度和负边距的方式有关。如果我错了，请纠正我，但是IE7没有像IE6那样遭受同样的盒子模型问题，但它仍然没有得到它。（也许它具有相同的盒子模型问题，这是它的表现形式？）当你在容器上设置填充（就像你有padding-left:148px）时，IE7错误地< em>将添加到子对象使用的相对宽度。然后，当您使用width:100%设置子对象时，您最终会得到一个太宽而无法放入父级提供的空间的子对象。

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

我们应该从中学到什么，当然（除了使用IE的麻烦之外），负边距可能会导致一些奇怪的行为，在大多数情况下都应该避免。尽管如此，你对双列布局的处理方法很有吸引力，其中较短列的背景与较长列的高度相匹配。

这个CSS设计的哪个部分正在剔除IE？

2 个答案: