Центр div внутри другого div в Internet Explorer - PullRequest
Новая
       3

Центр div внутри другого div в Internet Explorer

0 голосов
/ 29 июля 2011

У меня есть код ниже: 

#div1 {
    position: relative;
    width:800px;
    height:540px;
    top: 50%;
    left: 50%;
    margin-top: -270px;
    margin-left: -400px;
}

#div2 {
    position:absolute;
    left:69px;
    top:223px;
    width:250px;
    height:144px;
}

#div3 {
    width:100%;
    text-align:center;
    position:absolute;
    bottom:0px;
}
<div id="div1">
    <div id="div2">
        Message top.
        <div id="div3">
            Message bottom!
        </div
    </div>
</div>

div1 center o box в окне браузера. Это нормально для всех браузеров.

div2 поместите коробку внутри div1. Это нормально для всех браузеров.

div3 показывает сообщение внутри div2, но выровнено снизу и по центру. Это не нормально на IE8, потому что это центр div3 в зависимости от размера окна. Центр Chrome и Firefox внутри div2.

Если я добавлю границу к div3, она будет иметь ширину div2 во всех браузерах, но в центре окна будет IE8.

Как я могу это исправить?

Спасибо.

1 Ответ

0 голосов
/ 29 июля 2011

Это исправляет это для вас? 

<div id="div1" style="position: relative; width:800px; height:540px; top: 10%; left: 50%; margin-top: -20px; margin-left: -400px;">
    <div id="div2" style="position:absolute; left:69px; top:223px; width:250px; height:144px; border:1px solid blue">
        <div>Message top!</div>
        <div id="div3" style="width:100%; text-align:center; position:absolute; bottom:0px;border:1px solid red">
            Message bottom!
        </div
    </div>
</div>

(Да, я использовал старую версию со встроенным стилем).

Примечания:

  1. Проблема не в IE8, а в причудливом режиме IE8 (он же ie6 / 7) (исправьте спецификацию документа, если вы хотите, чтобы ваша страница отображалась как IE8, и проблема больше не возникает).
  2. Проблема в том, что он вставит #div3 "в строку" с вашим "Верхом сообщения!". Таким образом, инкапсуляция этого сообщения в блочный элемент решает проблему.
  3. Я изменил некоторые другие свойства, чтобы упростить тестирование (top: 10%, margin-top: -20px, некоторые границы ...)
...