代码之家 › 专栏 › 技术社区 › Paul Fisher

获取IE6怪癖模式position:absolute rendering 在标准模式下

quirks-mode css-position internet-explorer-6 css

1

Paul Fisher · 技术社区 · 17 年前

#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

2 回复 | 直到 17 年前

1

2

Paul Fisher 17 年前

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

不要使用怪癖模式,因为你喜欢,但设置你的背景是相同的颜色(或模式)。这会给人一种错觉,它实际上一直延伸到底部,而实际上它可能不会。

例如,如果我有一个灰色的导航栏,我会渲染一个256px x x 1px(在本例中)的纯灰色png(或者我想是gif),并将其设置为我的身体背景,并为身体背景设置repeat-y CSS参数:

例如

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

下面是一些额外的资源(用于放置阴影,但想法相同) http://www.alistapart.com/articles/onionskin/ http://www.ploughdeep.com/onionskin/360.html

祝你好运!

2

0

RwwL 17 年前

首先,如果内容足够长,页面可以滚动,菜单会随着页面向上滚动,而背景色也不会再延伸到底部,您是否同意(在您的原始代码中,对于所有浏览器)?位置:绝对与位置:固定不同。

如果这对你来说没问题,如果你只对IE6使用CSS hack或条件注释也没问题,那么问题只是IE6不支持你的minheight,但好消息是它对待height就像对待minheight一样。所以就这么做:

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

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

我把它放到了一个标准模式测试页面上,它看起来和其他浏览器一样工作。