2008-11-25 3 views
2

, пытаясь реализовать поведение стиля диалогового окна, используя отдельный раздел div со всем содержимым внутри него.Как центрировать элемент в IE6

Когда необходимо отобразить «диалоговое окно», оно должно отображаться в центре окна, а не в центре страницы, то есть независимо от положения прокрутки. Кроме того, правильное решение не будет перемещать «диалоговое окно», если пользователь прокручивает страницу.

В Chrome и FF это работает с использованием position = 'fixed' и центрирования div интуитивным способом.

Это, похоже, не работает в IE6 (видимо, там не поддерживается).

Любые идеи?

ответ

3

Если бы я был вами, я бы сделал это с помощью jQuery, и я предлагаю вам попробовать его. Это должно соответствовать отлично для на основе JQuery решения [JQuery версия] [1] или попробовать

body { 
    font: 80% verdana, arial, helvetica, sans-serif;   
    text-align: center; /* for IE */  
} 

#container {   
    margin: 0 auto; /* align for good browsers */   
    text-align: left; /* counter the body center */ 
    border: 2px solid #000;   
    width: 80%;  
} 
0

Используйте overflow-y и абсолютное позиционирование эмулировать фиксированное позиционирование в IE6, используя следующие шаги:

  1. Создать абсолютно позиционированный div и задайте требуемые верхние и левые координаты на странице

  2. Установите html {overflow-y: }, чтобы быть скрытыми или видимыми вместо автоматического или прокрутки по умолчанию, чтобы исключить полосу прокрутки для ab solutely позиционируется Div

  3. Набор body{overflow-y: } быть автоматической или прокрутки, чтобы вставить новую полосу прокрутки для содержимого тела

  4. Установите body { margin:0; height:100% }, чтобы убедиться, что скроллбар содержание идет длина страницы

  5. Телеприставки и левые поля на корпусе для отделения содержимого от абсолютно позиционированного div

  6. Убедитесь, что для типа doctype установлен режим Стандарт в IE

  7. Установите абсолютно позиционированы дела до top:50%; left:50%;

  8. Добавить position:relative и желаемой непрозрачность контейнера DIV

Если доктайп не установлен, переместите правила HTML в тег тела, и тело регламентирует обертку div

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    body { margin:0; margin-left: 14em; } 

    #fixedbox { position: fixed; top: 1em; left: 1em; width: 10em; } 

    #fixedbox { padding: 0.5em; border: 1px solid #000; } 

    #container { height: 2000px; } 

    @media, 
    { 
    html { _overflow-y: visible; *overflow-y: auto; } 
    body { _overflow-y: auto; _height: 100%; } 
    #container { _position: relative; } 
    #fixedbox { _position: absolute; _top:50%; _left: 50%; } 
    } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     Fixed box 
    </div> 

    <div id="fixedbox"> 
     Homer 
    </div> 
    </body> 
</html> 
Смежные вопросы