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

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

#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 центр или поле в окне браузера. Это нормально во всех браузерах.

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

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

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

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

Спасибо.


html css internet-explorer center
person Victor Santos    schedule 29.07.2011    source источник
comment
Пожалуйста, разделите CSS и HTML, так как очень раздражает вставка в jsFiddle для отладки...   -  person Phil    schedule 29.07.2011
comment
Вам не хватает закрывающей угловой скобки в самом внутреннем закрывающем теге div (не то чтобы это проблема, но я подумал, что упомяну об этом).   -  person Matt Gibson    schedule 29.07.2011
comment
Кстати, я пробую ваш код в IE8, и #div3 для меня находится в центре нижней части #div2. Это точно весь код? У вас есть полный рабочий пример? И вы определенно указываете DOCTYPE, чтобы предотвратить переход IE в режим совместимости?   -  person Matt Gibson    schedule 29.07.2011

Ответы (1)


arrow_upward
0
arrow_downward

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

<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, некоторые границы...)
person Kraz    schedule 29.07.2011
comment
Большое Вам спасибо. Теперь нормально во всех браузерах. :) - person Victor Santos; 29.07.2011