Почему мой плавающий левый div переходит на следующую строку в IE6, используя 960.gs? - PullRequest
Новая
       12

Почему мой плавающий левый div переходит на следующую строку в IE6, используя 960.gs?

0 голосов
/ 29 июля 2009

Я использую сетку 960 для создания сайта (www.960.gs).

У меня есть div с 9 столбцами (grid_9) с двумя div внутри (grid_5 и grid_4).

Это должно дать один большой внешний блок с двумя внутренними элементами, расположенными рядом внутри него.

Однако при просмотре в IE6 он отображается как один больший div с двумя внутренними div, один под другим.

В Firefox div'ы располагаются рядом друг с другом, как и положено, и такая же настройка отлично работает в других частях сайта.

Что происходит? Я не могу решить это.

Вот HTML: 

<div class="ContentWrapper grid_9 alpha omega">
        <div id="MainTitleWrapper" class="standardColor">
            <h2><span class="Rating"><%=Model.Rating%></span><%=Model.ScreenName%></h2>
        </div>
        <div class="MainContentWrapper standardColor">
            <div class="grid_5 alpha">
                    <h3>Ranked This Week In:</h3>
                    <div class="TagContentList">
                        <ul> some stuff</ul>
                    </div>
            </div>
            <div class="grid_4 omega">
                    <h3>Latest</h3>
                    <div class="tweet">
                    </div>
            </div>
        </div>
    </div>

Ответы [ 3 ]

1 голос
/ 29 июля 2009

Не имея возможности увидеть больше того, что происходит, я предполагаю, что содержимое ваших внутренних элементов div увеличивает их ширину, чем их контейнер. IE6 не учитывает обозначение ширины контейнера, если содержимое вообще увеличивает эту ширину.

Но, если можете, опубликуйте больше кода или ссылку!

0 голосов
/ 29 июля 2009

Может быть что-то столь же простое, как склонность IE6 к двойному пэду. Если вы осмелитесь подарить 960-сеточную систему взломом, попробуйте это: 

padding: 10px; /* whatever the padding is supposed to be for normal browsers */
_padding: 5px; /* half of that for IE6 */

IE6 отобразит правило _padding - другие браузеры - нет. Это работает для любого правила: нормальное правило стиля, сначала; IE6 _rule, после.

0 голосов
/ 29 июля 2009

Линия:

"и такая же настройка отлично работает в других разделы сайта. "

Приведет меня к рассмотрению отступов, полей и ширины содержимого в пределах div_srid_4 и grid_5, насколько я помню, блочная модель в IE6 довольно нестабильна.

Также IE6 (и, возможно, позже) имеет проблему в том, что курсив контент всегда шире, чем вы ожидаете, и может привести к тому, что внешний div (grid_4 или grid_5) будет шире, чем вы ожидаете.

...