Проблема с двойными горизонтальными полями, появляющимися в IE6 и IE7 - PullRequest
Новая
       13

Проблема с двойными горизонтальными полями, появляющимися в IE6 и IE7

0 голосов
/ 12 августа 2011

У меня крошечный выпуск с двойной маржей между <div>. Он отлично работает в FF, Opera, Safari и т. Д., Но не в IE6 и IE7 (что удивительно).

Предполагается, что левый плавающий <div> рядом с правым плавающим <div>, а затем под ним - еще один левша и правша. Между ними должно быть только 24 пикселя, но в IE6 и 7 - 47 пикселей.

HTML: 

<div id="content">
    <div id="contentwrapper">
        <div class="infobox leftinfo row1">
            <div class="searchForm">
            </div>
        </div>
        <div class="infobox rightinfo row1">
            <div class="searchForm">
            </div>
        </div>
        <div class="infobox leftinfo row2">
            <div class="textstuff">
            </div>
        </div>
        <div class="infobox rightinfo row2">
            <div class="textstuff">
            </div>
        </div>
    </div>
</div>

CSS: 

#contentwrapper{
    padding:23px;
}
#content{
    background-image:url(../img/contentbg.jpg);
    border: 1px solid #81b8de;
    -moz-box-shadow: 0 0 8px 5px #80cafe;
    -webkit-box-shadow: 0 0 8px 5px #80cafe;
    box-shadow: 0 0 8px 5px #80cafe;
    behavior: url(/sponster/PIE.htc);
    position:relative;
}
.infobox{
    border: 1px solid #4eed4e;
    background:url(../img/infoboxbg.png) repeat-x;
    height:100%;
    -moz-box-shadow: 0 0 12px -1px #406020;
    -webkit-box-shadow: 0 0 12px -1px #406020;
    box-shadow: 0 0 12px -1px #406020;
    behavior: url(/sponster/PIE.htc);
    position:relative;
}
.leftinfo{
    float:left;
    width:442px;
    margin-bottom:24px;
}
.rightinfo{
    float:right;
    width:442px;
    margin-bottom:24px;
}

N.B. Класс row1 предназначен для того, чтобы файл JavaScript мог обеспечить одинаковую высоту каждого соседнего элемента <div>. Это плагин jQuery: http://www.cssnewbie.com/equalheights-jquery-plugin и проблем с ним, похоже, нет.

Есть идеи, где я иду не так?

Ответы [ 2 ]

1 голос
/ 12 августа 2011

Добавьте это в HMTL между строками: 

<br class="cl">

Это будет выглядеть так: 

<div id="content">
  <div id="contentwrapper">
    <div class="infobox leftinfo row1">
      <div class="searchForm">
      </div>
    </div>
    <div class="infobox rightinfo row1">
      <div class="searchForm">
      </div>
    </div>
    <br class="cl">
    <div class="infobox leftinfo row2">
      <div class="textstuff">
      </div>
    </div>
    <div class="infobox rightinfo row2">
      <div class="textstuff">
      </div>
    </div>
  </div>
</div>

Добавьте это в CSS: 

.cl{clear:both}
0 голосов
/ 12 августа 2011

«Двойные« вертикальные »поля» - это хорошо известная проблема в IE 6, но она не должна быть проблемой в IE7. РЕДАКТИРОВАТЬ: Мой первый ответ был неправильным из-за к недоразумению по поводу исходного названия этой темы, которое гласило: «Проблема с двойными вертикальными полями, появляющимися в IE6 и IE7»

После того, как вы примените приведенное ниже исправление, дважды проверьте свой DOCTYPE и пропустите свой код через W3C Validator , чтобы убедиться, что все остальное в порядке.

Использование пустого <div> является очень распространенным методом «очистки» ваших поплавков, несмотря на принятый в этой теме ответ, который рекомендует использовать элемент перевода строки <br>.

Пустой <div> не имеет высоты , как показано в этом JSFiddle красным <div> с классом .empty. Обратите внимание, что пустые красные <div> невидимы и не занимают места между синими <div>.

Другие элементы, такие как <br />, имеют высоту строки, которая может вызвать другие проблемы с пробелами , как показано в этом JSFiddle . Обратите внимание, как вы можете видеть полную пустую строку между каждым синим <div>.

Поэтому добавьте <div style="clear:both;"></div> между строками <div>: 

<div id="content">
  <div id="contentwrapper">
    <div class="infobox leftinfo row1">
      <div class="searchForm">
      </div>
    </div>
    <div class="infobox rightinfo row1">
      <div class="searchForm">
      </div>
    </div>

    <div style="clear:both;"></div>

    <div class="infobox leftinfo row2">
      <div class="textstuff">
      </div>
    </div>
    <div class="infobox rightinfo row2">
      <div class="textstuff">
      </div>
    </div>
  </div>
</div>
...