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

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

#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  |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
+-------------------------------+

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

在除IE6之外的所有浏览器中，它都可以。在IE6标准模式下，它看起来更像这样：

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

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

这就是它变得棘手的地方。在“怪癖”模式下的IE6中，它看起来是正确的（就那个盒子而言，其他一切都是垃圾）

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

---

*是的，我知道我应该为此使用浮动，而不关心它是否会拉伸整个文档。但是导航栏的背景到达页面底部显然是神圣的，而且它不是平铺的

背景图像

Hm，也许洋葱皮是你在这里的朋友

免责声明：这并不适用于所有背景，但它适用于镶嵌的东西，我经常使用它来实现IE6兼容性

不要像你喜欢的那样使用怪癖模式，而是将你的背景设置为相同的颜色（或图案）。这会给人一种错觉，认为它实际上一直延伸到底部，而实际上它可能不会

例如，如果我有一个灰色导航栏，我会渲染一个256px乘以1px（在本例中）的纯灰色png（我想是gif），并使用为主体背景设置的repeat-y CSS参数将其设置为我的主体背景：

e、 g

不是很好，但保证可以处理比IE6:p更旧的东西

以下是一些额外的资源（用于放置阴影，但想法相同）

---

祝你好运

首先，您是否同意（在您的原始代码中，对于所有浏览器），如果内容足够长，页面可以滚动，菜单将随着页面向上滚动，并且您的背景色不再延伸到底部？位置：绝对与位置：固定不同

如果这对你来说没问题，如果你对仅仅为IE6使用CSS破解或条件注释没问题，那么问题在于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纠正这一点很容易。

我会的，但我不能使用背景图像。谢谢你的演奏。好吧，那对你来说很难，但我最终还是做了一些这样的事情：（见下一步第8节）这仍然不会把黄色的部分带到窗户的底部，没有它，整个世界都会着火，杀死我们所有人。至少我被引导相信了。