Question

我的菜单上有一个绝对定位的导航，发送到左侧。*

#menu {
    position: absolute;
    display:inline-block; /* I can hasLayout? */
    top: 0;
    left: 0;
    width: 265px;
    height: 100%;
    background: #ffc;
}

html>body #menu {
    height: auto;
    min-height: 100%;
}

看起来应该是这样的：

+-------------------------------+
| N  |                          |
|    |  content content content |
| A  | content content content  |
|    |                          |
| V  |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
+-------------------------------+

在IE6的每个浏览器中都可以。在IE6标准模式下，它看起来更像是这样：

+-------------------------------+
| N  |                          |
|    |  content content content |
| A  | content content content  |
|    |                          |
| V  |                          |
|    |                          |
|----+                          |
|                               |
|                               |
|                               |
|                               |
|                               |
|                               |
|                               |
|                               |
|                               |
+-------------------------------+

这是它变得棘手的地方。在IE6中的怪癖模式中，它看起来是正确的（就该方框而言;其他一切都是垃圾）。

如何在不强制怪癖模式的情况下从IE6获取正确的行为？

*是的，我知道我应该使用花车，并不关心它是否会拉伸整个文件。但是导航栏的背景到达页面底部并且它不是平铺的background-image显然是神圣的。

Answer 1

嗯，也许洋葱皮会成为你的朋友。

免责声明：这不适用于所有背景，但它适用于细分的东西，我经常诉诸于IE6兼容性。

不要使用你想要的怪癖模式，而是将包含的背景设置为相同的颜色（或图案）。这会产生这样一种错觉：它实际上一直延伸到底部，实际上它可能没有。

所以例如，如果我有一个灰色的导航栏，我会渲染一个256px乘以1px（在这种情况下）实心灰色png（或我想的gif）并将其设置为我的身体背景重复y身体背景的CSS参数集：

e.g。

html {
   background: url('path/to/my256by1pxgif.gif') repeat-y;
}

不是很棒，但保证可以使用比IE6更老的东西：P

这是一些额外的资源（用于投影，但同样的想法） http://www.alistapart.com/articles/onionskin/ http://www.ploughdeep.com/onionskin/360.html

祝你好运！

Answer 2

首先，您可以（在您的原始代码中，适用于所有浏览器），如果内容足够长，以便页面滚动，菜单将向上滚动页面，您的背景颜色不会再延伸到底部了？位置：绝对位置不一致：固定。

如果你没关系，如果你对IE6使用CSS hack或条件评论没问题，那么问题就在于IE6不支持你的最小高度，但好消息是它对待高度就像它的最小高度。所以这样做：

html, body { /* you probably already have this set for all browsers */
    margin: 0;
    padding: 0;
}

* html body { /* IE6 only */
    height: 100%;
}

我把它扔到标准模式测试页面上，它看起来像其他浏览器一样工作。

现在，如果#menu位于一个相对定位的包装器div而不是主体的直接子节点内，看起来其他浏览器会将#menu带到文档的底部，但是IE单独使用CSS不会很容易（它只是将#menu设置为初始视口的高度）。但是，使用JavaScript进行纠正是一件非常容易的事情。

获取IE6怪癖模式位置：标准模式下的绝对渲染

2 个答案: