CSS Floats - контент падает в IE6 - PullRequest
Новая
       10

CSS Floats - контент падает в IE6

4 голосов
/ 17 апреля 2009

У меня есть макет с меню DIV слева. Это смещено влево с фиксированной шириной EM. Затем у меня есть контент DIV, который имеет левое поле больше ширины меню. Таким образом, он расположен справа от меню и заполняет оставшееся пространство как меню, так и контентом, выстроенными в линию.

Однако в Internet Explorer 6, если содержимое становится слишком широким, оно опускается под меню. Это означает, что у вас есть множество пробелов, и вы не можете видеть какой-либо контент вообще без прокрутки.

К сожалению, я не могу вносить изменения в контент - это редизайн сайта, на котором размещается сторонний контент, и изменение этого контента выходит за рамки того, что я могу сделать.

Кроме того, есть строка нижнего колонтитула, которая должна находиться под меню и содержимым.

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

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

Кто-нибудь знает, существует ли простой не-Javascript способ сделать это, который будет работать в IE6, а также в «правильных» браузерах? В настоящее время я думаю, что это должен быть макет на основе таблицы.

Вот пример проблемы: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <style type="text/css">
            .menu {
                width: 14em;
                float: left;
            }

            .content {
                margin-left: 15em;
                zoom: 1;
            }

            .footer {
                clear: both;
            }

             /* styling to make the demo more obvious */
            .menu {
                background-color: #f99;
            }
            .content {
                background-color: #9f9;
            }
            .footer {
                background-color: #99f;
            }
            td {
                border: 1px solid #000;
            }
        </style>
    </head>

    <body>

    <div class="container">
        <div class="menu">
            <ul>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
            </ul>
        </div>

        <div class="content">
            <h1>Main Content</h1>
                <table>
                    <tr>
                        <td>this is a really</td>
                        <td>wide table which</td>
                        <td>I am using to push</td>
                        <td>the content down</td>
                        <td>need to keep going</td>
                        <td>so that it breaks</td>
                        <td>in ie6</td>
                        <td>but naturally</td>
                        <td>nothing else</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="footer">
            <p>Copyright blah blah blah</p>
        </div>
    </body>
</html>

Ответы [ 7 ]

3 голосов
/ 17 апреля 2009

Как вы упомянули, вы уже пробовали абсолютную позицию. Но я попробую следующее, и это может сработать для вас. Вот CSS: 

.container {
    position:relative;
}
.menu {
    width: 14em;
    position:absolute;
    top: 0;
    left: 0 !important;
    left: -15em;
}

.content {
    margin-left: 15em;
}
.footer {
}

Некоторые пояснения: меню позиционируется абсолютно, независимо от другого контента. Тем не менее, IE помещает меню относительно div «content» и скрывает его за div «content». Обходной путь заключается в том, чтобы позиционировать его отрицательно, так же, как и их число слева, так как у содержимого div есть «margin-left». Но это должно быть сделано только для IE, поэтому для него добавляется «left 0! Важный» (но до отрицательного левого), который работает, потому что IE игнорирует «! Важное», в то время как другие браузеры признают это и будут использовать «левый 0» .

Обновление:

Как отмечает Алохчи, лучшим способом было бы использовать взлом "* html", в этом случае CSS для "menu" становится: 

.menu {
    width: 14em;
    position:absolute;
    top: 0;
    left: 0;
}

* html .menu {
     left: -15em;
}
2 голосов
/ 17 апреля 2009

Почему бы не использовать установленный макет, например, http://layouts.ironmyers.com/

или вы можете захотеть исследовать это переполнение css

Посмотрите на это , это помогает?

EDIT:

Попробуйте одно из следующих исправлений: (вы можете использовать некоторый условный код, например, @Blake)

  • переполнение: прокрутка - это гарантирует, что ваш контент будет виден за счет дизайна (полосы прокрутки уродливы)

  • переполнение: скрыто - просто отключает любое переполнение. Это означает, что люди не могут читать содержимое. 

    .content {
        margin-left: 15em;
        zoom: 1;
        overflow:scroll  
        /* overflow:hidden */ /* probably second best */
}

Попробуйте взглянуть на это Как не допустить, чтобы длинные слова нарушали мой div? Это ваша проблема?

1 голос
/ 17 декабря 2010

Слишком поздно, но обычно я получаю фиксированные смещения, добавляя абсолютную ширину (число в пикселях, точках или любую жесткую систему измерения вместо em,% и т. Д.) Или иногда добавляя свойство min-width, решает его, также остерегайтесь отступов и границ из-за суммы boxmodel.

1 голос
/ 17 апреля 2009

Удаление zoom: 1; заставляет его работать нормально в IE6.

1 голос
/ 17 апреля 2009

Используйте некоторые условные комментарии для IE6, чтобы прочитать и поместить в необходимый CSS, чтобы зафиксировать ширину проблемных делителей, например: 

<!--[if IE 6]>
IE 6 specific stuff goes here. You can load a specific stylesheet here, or just have inline css
<![endif]-->

Подробнее об условных комментариях вы можете прочитать здесь.

0 голосов
/ 21 апреля 2009

Спасибо за позицию: абсолютная идея. Это похоже на одно решение, с которым я почти согласился.

Проблема здесь в том, что меню будет перекрывать нижний колонтитул, если оно длиннее содержимого (и это довольно часто). Я мог бы попытаться добавить произвольную высоту к контенту, чтобы установить минимальную высоту, но я не знаю, насколько большим будет меню. Существует вероятность того, что очень много спустится по боковой панели в этой области.

Я полагаю, что нет способа заставить контейнер с относительным позиционированием расти в ответ на содержимое с абсолютным позиционированием, не так ли? Даже если это взлом IE6, так как я могу использовать метод float для других браузеров.

(Опять же, извините, что не опубликовал это как комментарий, но я не получаю это как опцию)

0 голосов
/ 17 апреля 2009

Я сталкивался с этим так много раз, что просто стараюсь держаться подальше от поплавков. Тем не менее, есть некоторые вещи, которые вы можете сделать, чтобы заставить их работать, но вам, возможно, придется согласиться на исправление с макетом и / или некоторые специфичные для IE6 исправления . Вот несколько вещей, которые вы можете попробовать:

  1. Это может звучать как ересь, но таблицы не являются неправильными для разметки, они просто не крутые.
  2. Попробуйте установить div 'container' с помощью фиксированная ширина и авто поля.
  3. Если это не сработает, попробуйте исправить ширина 'content' div с вашим фиксированным ширина «контейнер» дел.
...