Чиним «прыгающие блоки» в IE6 простейшим способом редактировать

Те, кто верстают под IE6, наверняка сталкивались с проблемой «прыгающих блоков», то есть с ситуацией, когда блоки с заданным float и шириной в процентах, при ресайзе браузера начинают то «сваливаться» друг под друга, то вставать на прежнее место. Классическая головная боль для тех, кто проектирует модульную сетку в процентах.

Проблема достаточна хорошо освещена в интернете. Например, в Техногрете студии Лебедва ее решению посвящены целых две статьи и один скринкаст . Не знаю кому как, а мне эти решения не по душе: некоторые из-за дополнительной разметки, некоторые — из-за хитровымученных стилей. Поэтому я предпочитаю использовать другое, состоящее всего из одной строчки. А вот, кстати, и оно:

< div class ="left" ></ div >
< div class ="right" ></ div >

< style type ="text/css" >
  .left, .right {
    float: left;
    width: 50%;

    /* внимание: */
    clear: right;
  }
</ style >


* This source code was highlighted with Source Code Highlighter .

Рабочий пример (смотреть, разумеется, надо в IE6)


Женщины с планеты float, мужчины — с планеты clear.

Решение основано на глюке отличительной особенности браузеров IE5-7, которая выражается в том, что если блокам с float указать свойство clear с противоположным к float значением, то они перестают переноситься один под другой. Грубо говоря, блоки после такого просто «прилипают» друг к другу намертво и не «отлипнут» друг от друга уже ни при каких обстоятельствах.

Почему IE так поступает — это отдельный вопрос, на который у меня, к сожалению, нет ответа (кроме «it's а fucking magic»). Однако давайте подумаем, что это нам дает. Кроме приведенного выше фикса оно позволяет эмулировать некоторые аспекты неподдерживаемых в IE5-7 свойств display: table и table-cell . К примеру, можно создавать «резиновые» многоколоночные раскладки, которые не будут разваливаться или обрубать контент при переполнении. Скажем, что-нибудь такое:
< style type ="text/css" media ="screen" >
  * {
    margin: 0;
    padding: 0;
  }
  #container {
    display: table;
    width: 100%;
  }
  .column {
    display: table-cell;
    width: 25%;
  }
</ style >
<!--[if lt IE 8]>
  <style type="text/css">
    #container {
      width: auto;
    }
    .column {
      float: left;
      clear: right;
      
      width: auto;
      min-width: 25%;
      _width: 25%;
    }
  </style>
<![endif]-->

< div id ="container" >
< div class ="column" > 25% </ div >
< div class ="column" > 25% </ div >
< div class ="column" > 25% </ div >
< div class ="column" > 25% </ div >
</ div >


* This source code was highlighted with Source Code Highlighter .


И напоследок

Если вы решите поэкспериментировать с различными комбинациями float и clear в IE, вы обнаружите много интересного. Например то, что для достижения клинического эффекта, совершенно не обязательно устанавливать clear у всех блоков c float . Или то, что блоки не обязательно должны иметь одинаковое обтекание, (т.е. можно создать «непереносящуюся» комбинацию из двух блоков: у одного будет float:left , а у другого float:right ). Или что-нибудь еще такое же интересное, о чем непременно стоит написать в комментах.
blog comments powered by Disqus

комментарии с хабра ( 67 )

  • Призыв к тем, кто командует верстающими под IE6: Откажитесь от поддержки этого недобраузера, вы точно не потеряете в потенциальных клиентах и деньгах.

    ответить

    • Призывы отказаться это конечно хорошо, и уверения в том, что не будет потеряно денег и клиентов тоже, но суровая действительность такова, что если следовать этим призывам то 4 из 5 клиентов будут звонить и говорить: «Ой, а я открыл сайт и у меня все там развалилось...»

      Проверено опытным путем.

      ответить

      • Ну это уже вопрос реализации, можно сделать и весьма мягко: например, при заходе на страницу определять браузер и выдавать сообщение, о том, что так и так IE6 это не хорошо и пар линок типа «Мы рекомендуем»… Как то так.

        ответить

        • Простите, но это утопия.
          Если Вы найдете заказчика, который, допустим, торгует велосипедами и при этом готов тратить свои деньги на продвижение современных браузеров, подарите ему торт. Деньги отдам.

          ответить

          • А у меня получилось. Однажды. Когда встречался с заказчиком лично, а не созванивался по телефону.

            Многое зависит от того, насколько близок к компьютерам заказчик.

            ответить

            • Поделитесь опытом взаимодействия такого :)

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

              ответить

              • Могу сказать, что лучшие инструменты воздействия на заказчиков — рыночные :)
                Можно легко скинуть с себя «поддержку IE6» сообщив, что при этом стоимость верстки упадет на 20%.
                Конечно, надо объяснить какую долю он занимает на рынке и какая группа потенциальный клиентов им пользуется. Ну и конечно, в IE6 тем не менее, вся информация и функционал должны быть доступны в том или ином виде.

                ответить

              • Мы реализовывали достаточно сложное взаимодействие JS с серверной частью, + эффекты и всякая мишура. На IE6 скрипты выполнялись не очень быстро ;)

                Мы просто показали ему тесты посли оптимизации и статистику посещений. Доля IE6 — 15%. Потом объяснили, что клиентам больше понравится ооочень быстрый сайт. Дал согласие на красную плашку в шапке, с ссылкой на сайт Оперы. В итоге постоянная аудитория на IE6 сократилась до 7%.

                Но от оптимизации под IE6 мы не отказывались, программисты сделали сайт быстрым под любым браузером.

                ответить

                • >> В итоге постоянная аудитория на IE6 сократилась до 7%.
                  Интересно, за счёт чего :) Перешли на Оперу или ушли с сайта?

                  ответить

                  • Кто-то на Оперу, кто-то на Лису. Размер аудитории остался в пределах нормы.

                    ответить

                • Почти аналогично: на всех страницах портала внизу забил кусочек места 200х50рх с надписью «Рекомендуем быстрый… ФФ» + ссылка на инструкцию по установке (с картинками, которой уже 2 года :-(.

                  И этот блок там примерно с начала 2007 года.

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

                  Под ИЕ6 конечно работает 99.5% функционала, но из-за него до сих пор приходится держать верстку «в старом и кошмарном варианте», в планах переделка только на следующий год.

                  ответить

                  • upd.: вспомнил, что с прошлого года там прикручен учет кликов на ссылку «скачать» (перехода на сайт Мозиллы); так вот число кликов на сегодня: 869.
                    Смею надеятся, что почти 1к людей заполучили ФФ вместо «ужастика» ИЕ.

                    ответить

            • От опытности заказчика это не зависит. Могу привести противоположный пример, когда заказчик является разработчиком, и требует совместимость с порядком 15 браузеров, включая 6. В списке был даже 5, правда с ограничениями — обеспечить основную графику и структуру дизайна.

              ответить

        • Видимо, вы не пробовали так делать, да? Тогда лучше не пробуйте. Потратите время и останетесь без денег.

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

          ответить

          • Да вон на дестких сайтах уже делают :) рекомендуют браузеры: www.smeshariki.ru — можете зайти под ie6

            ответить

            • Этот сайт поругался на Оперу!!! Вот вам и ООО «Новые Медиа»…

              ответить

            • И под Оперой тоже вылазит окошко. Чем им она то не угодила? )

              ответить

            • Угу отличный пример. Мой Chrome (dev-канал обновлений) посоветовали обновить.

              ответить

            • В довершении к выше сказаному — под хромом тоже окошко :)

              ответить

            • Судя по всему, ребятам просто было лень допиливать сайт и была возможность этого не делать.
              Потому что Chrome они тоже не любят.

              ответить

              • угу, а еще их всплывающие подсказки на оставляют след (opera 10) помоему им действительно было лень дописывать )

                ответить

              • Или заплатили, яндекс же тоже не просто так советует всем FireFox и IE новые с яндексом баром.

                ответить

            • Просто разработчики влюблены в IE8 и FF :)

              ответить

    • к сожалению много потенциальных клиентов до сих пор ездят на 6 осле

      ответить

    • К кому вы призываете, ё моё?? Что за детский сад?
      Поддержка IE6 нужна заказчикам, а не верстальщикам — мы то как раз в гробу его видели и давно. Но пока его доля не упадет хотя бы до 5% и заказчикам сайтов не станет на эти 5% насрать — с ним придется иметь дело. А еще корпоративный сектор

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

      ответить

    • в консервативных средах IE6 используется еще очень и очень широко.
      В мае специально делал выборку по базе данных в моем проекте.
      Банковский сектор IE 6.0 (60.4%), IE 7.0 (37.0%)
      И как после этого отказываться?) Сам жду, пока умрет)

      ответить

    • Понимаете, тут в другом дело. Отказаться можно. Можно даже объяснить это клиенту так, что он не передумывает заказывать сайт именно у вас. Мне кажется здесь момент собственной гордости намного сильнее работает.
      «Как, я не справлюсь с каким-нибудь IE6?», «Класс! Очередной сюрпрюз! Сейчас я тебе задам, поганец! У меня будет «флоутиться» все!!!»… Лично у меня постоянно возникают такие мысли, и хочется в очередной раз доказать себе, что наперекор всей неприспособленности IE6 к современным стандартам и требованиям верстальщиков, можно сделать так «чтобы и там работало».

      ответить

    • А вот как то не получается — уже 3 раз попадаю на заказчика, который юзает IE6 (Почему не знаю).

      Кстати небольшой оффтопик:

      IE меня сегодня реально спас.

      Вообщем остается час до сдачи верстки и я тут совершенно случайно затираю CSS — файл каким то очень старым состоящим из 5 строк кода.У меня паника че делать, время остался час до встречи, а ехать до офиса целых 40 минут, в итоге за 15 минут переписать ничего не успею.И тут приходит гениальная мысль — Я же тестировал верстку последний раз под ИЕ на виртуалбоксе с ХР (Сам работаю на Маке (Кто подскажет, где сафари хранит прокешированные файлы буду благодарен)),
      отрываю в Temporatory Internet Files свою CSS-ку и вуаля.

      Это был первый раз в моей жизни когда я обозлиллся на на Макось насчет затирания папок и возрадовался ИЕ=)

      ответить

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

    ответить

    • Google сам себе хозяин. Вы еще про YouTube забыли. Это прекрасно, что они отказываются, процесс идет, вот только к реальной работе верстальщиков это не имеет никакого отношения

      ответить

      • Я гугль и упомянул потому что на YouTube висит надпись о прекращении поддержки ;)
        К работе верстальщиков это имеет большое значение.

        ответить

        • Разве что к работе верстальщиков гугла

          ответить

          • Нет, ко всем. Чем больше важных сервисов откажется от IE6 — тем быстрее пользователи обновятся на свежие версии и тем меньше будет доля пользователей IE6.

            ответить

    • >Google уже отказывается от поддержки IE6.
      www.google.com открывается и работает. Если у вас есть ie6 (?) вы в этом можете убедиться.

      ответить

      • Нет, у меня нет IE вообще.
        Гугль не отказался, он отказывается и пока не для всего, а для некоторых сервисов. Это все равно большой шаг.

        ответить

  • Кроме приведенного выше фикса оно позволяет эмулировать некоторые аспекты неподдерживаемых в IE5-7 свойств display: table и table-cell.

    О сколько нам открытий чудных! Автор, где же вы раньше то были? Спасибо вам огромнейшее.

    ответить

  • Прочитав кода предположил, посмотрев пример убедился :) В момент, когда должно происходить «спрыгивание», суммарная ширина двух блоков превышает контейнер на 1 пиксель, соответственно, появляется горизонтальный скролл. Поэтому во-первых, их придется оборачивать в элемент с overflow: hidden, во-вторых нужно учитывать этот «пропадающий» пиксель (если там графическая рамка, например border-right).

    А вообще, решение красивое, спасибо.

    ответить

    • код*

      ответить

    • Ну это не страшно, по сравнению с прыгающими блоками.

      ответить

      • Конечно. Решение абсолютно пригодное для практического использования.
        Я просто хотел подчеркнуть, что это нужно учитывать.

        ответить

    • Решение на самом деле старо как мир, когда я только начинал серьёзно верстать (года 4 назад) это было уже известно, горизонтальный скролл возникает из-за округления процентов в пиксели, если количество пикселей не чётное, то IE добавляет 1 пиксель. Лечиться добавлением отрицательного отступа в 1px на родительский контейнер.

      ответить

      • НЛО прилетело и опубликовало эту надпись здесь.
        • www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie/

          Даже удивительно, год 2005.

          ответить

          • НЛО прилетело и опубликовало эту надпись здесь.
        • Да! Лично для меня akella — гуру верстки в Украине. Очень уважаю его и читаю каждую новую запись в его блоге.

          ответить

        • Аналогично. С тех самых пор активно этим способом пользуюсь. Даже и не думал, что многие не знают об этой замечательной особенности ослика.

          ответить

      • Решение с отрицательным отступом не всегда применимо, впрочем, как и решение, предложенное автором. Чем больше способов известно, тем больше вероятность красиво решить конкретную задачу.

        ответить

    • Если мы пропишем overflow: hidden, то скролинг не пропадает, а остается на месте, блоки естественно тоже останутся прыгающими. Видимо баг выходит за грани разумного)

      ответить

      • Ну блоки прыгающими не могут «остаться», т.к. с clear: right; они уже не прыгают.
        А для того, чтобы overflow:hidden; элемент знал, когда содержимое перестает его растягивать и становится hidden, ему надо задать ширину.

        Пример

        ответить

        • Я изначально неправильно вас понял, каюсь (:
          Про ширину забыл(

          ответить

  • Тут какбэ есть вторая сторона медали, часто спасает не clear, а zoom: 1 — иногда эффект просто поражает :)

    ответить

    • zoom: 1 — не панацея.
      На описанную проблему он как раз ни как не влияет

      ответить

      • Угу, не следует комментировать после прочтения первых 4х строчек, прошу прощения :)

        ответить

    • НЛО прилетело и опубликовало эту надпись здесь.
  • Супер мега крутой меджик ;)))
    поражён %)

    ответить

  • На Хабре периодически возникают решения, которые поднимались еще несколько лет назад — волна за волной новички наступают на те же грабли

    ответить

    • Просто в таких статьях надо использовать правильные ключевые слова. Я бы, например, никогда не ввел бы в гугл «прыгающие блоки», а ввел бы правила css, которые использовал и слова аля «ie6», «bug».

      ответить

  • НЛО прилетело и опубликовало эту надпись здесь.
  • верстаю частично на таблицах частично на дивах, проблем с ие6 не возникает

    ответить

  • Спасибо, за хитрость — пригодится. Но лично я, отказался в своих проектах от float и использую table-cell, а в IE display: inline; Блоки не прыгают, да и вообще работает хорошо (:

    ответить