1

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

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

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

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

4

2 回答 2

2

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

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

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

因此，例如，如果我有一个灰色导航栏，我会渲染一个 256px x 1px（在这种情况下）纯灰色 png（或我想是 gif）并将其设置为我的身体背景，并使用 repeat-y 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

祝你好运！

于 2009-07-29T21:15:47.390 回答
0

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

如果这对你来说没问题，并且如果你对只为 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 更正是一件非常容易的事情。

于 2009-07-29T22:15:15.643 回答