Сетка divs отображается неправильно в IE7 - PullRequest
Новая
       35

Сетка divs отображается неправильно в IE7

1 голос
/ 15 октября 2011

РЕДАКТИРОВАТЬ: я не заметил, что я установил фиксированную ширину и высоту для .slot - изначально это было 33,3333%.Но IE7 отобразил его «правильно» только с этим фиксированным размером (эта страница имеет размер 600 x 600)

Я пытаюсь создать вид сетки с элементами div, которые бы заполняли всю страницу.После 2 дней поисков в IE 7 я наконец-то здесь ...

Итак, основная идея - сетка 3х3 с внешней границей и фиксированным расстоянием между ячейками.Для этого примера вертикальное расстояние составляет 2 пикселя, а горизонтальное - 1 пикселя.Сетка заполняет страницу.

Стили: 

html, body {
    width           : 100%;
    height          : 100%;
    padding         : 0;
    margin          : 0;
}

#root {
    height          : auto;
    display         : block;
    position        : absolute;
    bottom          : 0;
    top             : 0;
    left            : 0;
    right           : 0;    
    border          : 3px solid #000000;
    padding         : 2px 0px 0px 1px;
}

.slot {
    position        : relative;
    float           : left;
    padding         : 0;
    margin          : 0;
    width           : 33.3333%;
    height          : 33.3333%;
}

.block {
    height          : auto;
    display         : block;
    position        : absolute;
    bottom          : 0;
    top             : 0;
    left            : 0;
    right           : 0;    
    margin-right    : 1px;
    margin-bottom   : 2px;
    border          : 2px solid black;
}

А вот разметка: 

<body>
    <div id="root">
        <div class="slot">
            <div class="block">
                <p>Some text</p>
            </div>
        </div>

        ... 8 more times .slot div

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

Есть ли способ заставить IE7 правильно его отобразить?

1 Ответ

0 голосов
/ 15 октября 2011

попробуйте это: добавьте свойство css display:block в класс .block. Вам необходимо также зафиксировать ширину #root div, потому что если ширина не зафиксирована, то сетка распространяется до доступной ширины.

...