Странный разрыв между соседними элементами div в режиме причуд IE8

У меня проблема с IE8 в режиме причуд. У меня есть внешний элемент div, который охватывает два внутренних div.

<div style="margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background:blue;">
    <div style="position:relative; float:left; width:10px; height:10px; background:orange;"></div>
    <div style="position:relative; margin-left:10px; margin-right:0px;height:10px; background:green;"></div>
</div>

Внутренние div должны охватывать весь div-оболочку, и он отлично работает в firefox и chrome. Но когда я просматриваю это в IE8, между оранжевым div и зеленым div появляется странный разрыв. Кто-нибудь знает, как это исправить (или обойти это)? Кроме того, я не могу разместить объявление типа документа в любом месте документа.


html internet-explorer-8 quirks-mode gaps-in-visuals
person John    schedule 01.03.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Используйте абсолютное позиционирование содержимого и относительное позиционирование контейнера для режима причуд:

    <html lang="en">
    <head>
        <title>Quirksmode Tests</title>
    </head>
    <body>
        <div style="position:relative; margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background-color:blue;">
          <div style="position:absolute; top:0; width:100%; right:0; height:10px; background-color:green;"></div>
          <div style="position:absolute; top:0; left:0; width:10px; height:10px; background-color:orange;"></div>
        </div>
    </body>
    </html>

Ссылки

person Paul Sweatte    schedule 23.10.2012