IE 8 неправильно позиционирует 960 Grid - PullRequest
Новая
       24

IE 8 неправильно позиционирует 960 Grid

1 голос
/ 25 марта 2011

У меня есть ниже HTML и структура классов. В Firefox он отображается так, как ожидается, но в IE 8 rt-col помещается в следующую строку. Есть идеи, что может быть не так? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
...
...
<div id="main" class="container_12">
  <div id="lt-col" class="grid_8">
  ...
  </div>
  <div id="rt-col" class="grid_4">
  ...
  </div>
</div>

Ниже приведены CSS, относящиеся к контейнерам и сеткам: 

#main:after, #lt-col:after, #rt-col:after { 
   content: "."; 
   height: 0; 
   visibility: hidden; 
   display: block; 
   clear: both; 
} 

#main { 
   width: 960px; 
   margin-left: auto; 
   margin-right: auto; 
   margin-top: 10px;
}

Ответы [ 2 ]

0 голосов
/ 14 апреля 2011

@ clairesuzy Я думаю, что проблема заключается в применяемой стилизации.Существует некоторый стиль, который добавляет заполнение либо к главному div, либо к rt-col и lt-col div

, это можно легко отсортировать, используя приведенный ниже код для начала с 

<div class="container_12">
  <div class="grid_8">
  ...
  </div>
  <div class="grid_4">
  ...
  </div>

  <div class="clear"></div>
</div>

это выше будет работать из коробки независимо от стиля ...

, затем сделайте это и убедитесь, что нет отступов 

<div id="main">

    <div class="container_12">

        <div class="grid_8">
            <div id="lt-col">...</div>
        </div>
        <div class="grid_4">
            <div id="rt-col">...</div>
        </div>

    <div class="clear"></div>   
    </div>
</div>

упрощенная версия того, что вы хотите сделать

0 голосов
/ 25 марта 2011

Предполагается, что вы пытаетесь построить левую и правую сетку столбцов:

Вам необходимо определить явную ширину для каждого столбца. В настоящее время у вас нет ни одного. И так как вы используете "clear: both;" атрибут и значение в обоих столбцах, они будут просто отображаться в виде строк.

Добавьте это к своему CSS (или к некоторым изменениям ширины), и ваши строки превратятся в столбцы: 

    #lt-col {
            float: left;
            width: 50%;
    }
    #rt-col {
            float: right;
            width: 50%;
    }
...