获取 IE6 quirks-mode position：标准模式下的绝对渲染答案

【问题标题】：Get IE6 quirks-mode position:absolute rendering in standards mode获取 IE6 quirks-mode position：标准模式下的绝对渲染
【发布时间】：2010-11-15 05:40:47
【问题描述】：

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

#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 中，它看起来是正确的（就那个框而言；其他一切都是垃圾）。

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

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

【问题讨论】：

标签： css internet-explorer-6 css-position quirks-mode

【解决方案1】：

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

免责声明：这不适用于所有背景，但它适用于镶嵌的东西，我经常求助于 IE6 兼容性。

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

因此，例如，如果我有一个灰色导航栏，我会渲染一个 256 像素 x 1 像素（在这种情况下）纯灰色 png（或我想是 gif）并将其设置为我的身体背景，并使用 repeat-y为body背景设置的CSS参数：

例如

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

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

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

祝你好运！

【讨论】：

我会，但我不能使用背景图像。感谢您的参与。
好吧，那么做你很糟糕，但我最终做了一些事情来达到这个效果：456bereastreet.com/lab/developing_with_web_standards/csslayout/…（见底部步骤#8）
这仍然不会将黄色部分一直带到窗口底部，否则世界将真正着火并杀死我们所有人。或者我被引导去相信。

【解决方案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 内而不是 body 的直接子级，看起来其他浏览器会将 #menu 带到文档的底部，但 IE 不会轻易地与 CSS 一起玩（它只会将#menu 设置为初始视口的高度）。不过，用 JavaScript 更正是一件很容易的事情。

【讨论】：