Как центрировать элемент <div>в IE6 - PullRequest
Новая
       9

Как центрировать элемент <div>в IE6

2 голосов
/ 26 ноября 2008

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

Когда необходимо отобразить «диалоговое окно», оно должно отображаться в центре ОКНА, а не в центре страницы, то есть НЕЗАВИСИМО от положения прокрутки. Кроме того, правильное решение не будет перемещать «диалоговое окно», если пользователь прокручивает страницу.

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

Похоже, это не работает в IE6 (по-видимому, исправлено там не поддерживается).

Есть идеи?

Ответы [ 3 ]

3 голосов
/ 26 ноября 2008

На вашем месте я бы сделал это с помощью jQuery, и я бы посоветовал вам тоже попробовать. Это должно идеально подходить для решения на основе jQuery [jQuery Version] [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%;     
}
2 голосов
/ 26 ноября 2008

Попробуйте метод, изложенный здесь .

0 голосов
/ 10 января 2012

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

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

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

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

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

  5. Установите верхнее и левое поля на теле, чтобы отделить содержимое от абсолютно расположенного div

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

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

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

Если тип документа не задан, переместите правила html в тег body, а правила body - в оболочку 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...