Получить IE6 quirks-mode position: абсолютный рендеринг в стандартном режиме - PullRequest
Новая
       12

Получить IE6 quirks-mode position: абсолютный рендеринг в стандартном режиме

1 голос
/ 30 июля 2009

У меня в меню есть абсолютно позиционированная навигация, которая отправляется на левую сторону. *

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

Ответы [ 2 ]

2 голосов
/ 30 июля 2009

Хм, возможно, луковая шкура будет твоим другом здесь.

Отказ от ответственности: это не работает для ВСЕХ фонов, но отлично работает для вещей, которые тесселяют, и я часто прибегаю к этому для совместимости с IE6.

Не используйте режим причуд, как вы предпочитаете, но установите фон, на котором вы находитесь, того же цвета (или рисунка). Это создаст иллюзию того, что на самом деле он простирается до самого дна, а на самом деле это не так.

Так, например, если бы у меня была серая панель навигации, я бы отобразил 256px на 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

Удачи!

0 голосов
/ 30 июля 2009

Во-первых, нормально ли вам (в вашем исходном коде для всех браузеров), если содержимое достаточно длинное для прокрутки страницы, меню будет прокручиваться вверх со страницей, а цвет фона не будет продлить до дна больше? Позиция: абсолютная не совпадает с позицией: фиксированная.

Если с вами все в порядке, и если вы согласны с использованием хака CSS или условного комментария только для IE6, то проблема в том, что 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.

...