Как центрировать элемент <div> в IE6
пытается реализовать поведение в стиле диалогового окна, используя отдельный раздел div со всем содержимым внутри него.
Когда необходимо отобразить «диалоговое окно», оно должно отображаться в центре ОКНА, а не в центре страницы, то есть НЕЗАВИСИМО от положения прокрутки. Более того, правильное решение не переместит «диалоговое окно», если пользователь прокручивает страницу.
В 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%;
}
Используйте overflow-y и абсолютное позиционирование для имитации фиксированного позиционирования в IE6, выполнив следующие действия:
Создайте абсолютно позиционированный div и задайте ему желаемые координаты сверху и слева на странице.
Установите
html {overflow-y: }как скрытый или видимый вместо автоматического или прокрутки по умолчанию, чтобы убрать полосу прокрутки для абсолютно позиционированного div.Установите для
body{overflow-y: }автоматический режим или прокрутите, чтобы вставить новую полосу прокрутки для основного содержимого.Установите
body { margin:0; height:100% }, чтобы убедиться, что полоса прокрутки содержимого проходит по длине страницы.Установите верхнее и левое поля на теле, чтобы отделить содержимое от абсолютно позиционированного div.
Убедитесь, что doctype настроен на запуск стандартного режима в IE.
Установите абсолютно позиционированный div на
top:50%; left:50%;Добавьте
position:relativeи желаемую прозрачность в контейнер div
Если тип документа не задан, переместите правила html в тег 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>