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 モードを強制せずに IE6 から正しい動作を取得するにはどうすればよいですか?

* はい、これにはフロートを使用する必要があることはわかっていますが、ドキュメント全体が引き伸ばされることは気にしません。しかし、navbar の背景がページの下部に達し、タイル状にならないようにすることは明らかに神聖ですbackground-image。

4

2 に答える 2

0

最初に、(すべてのブラウザで、元のコードで) コンテンツがページをスクロールするのに十分な長さである場合、メニューはページと共に上にスクロールし、背景色はもう底？Position: absolute は position: fixed と同じではありません。

それでよろしければ、また IE6 だけに CSS ハックや条件付きコメントを使用しても問題ないのであれば、問題は IE6 が min-height をサポートしていないことですが、良いニュースは高さだけを扱うことです。最小高さのように。だからこれをしてください：

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

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

これを標準モードのテスト ページに投げると、他のブラウザーと同じように動作するように見えます。

現在、#menu が body の直接の子ではなく、相対的に配置されたラッパー div 内にある場合、他のブラウザーは #menu をドキュメントの一番下に配置するように見えますが、IE は CSS だけでは簡単に動作しません (それは ' #menu を最初のビューポートの高さに設定するだけです)。ただし、JavaScript を使用して修正するのは非常に簡単です。

于 2009-07-29T22:15:15.643 に答える