CSS-трюк: IE, таблица и “резиновые” изображения

16 декабря 2009 г.

Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился.

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

Рассмотрим пример. Суть заключается в следующем:

  • У нас имеется “резиновая” страница, которая растягивается на всю ширину окна браузера.
  • Имеем таблицу с шириной 100%.
  • В таблице имеем ряд из 5-ти изображений (в нашем примере их реальная ширина - 250 пикселей), и необходимо, чтобы при изменении ширины окна браузера эти изображения растягивались или сужались пропорционально, заполняя всю ширину таблицы. Реализуется это следующим простым способом:

    HTML:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <table>
      <tr>
        <td><img src="1.jpg" alt="" /></td>
        <td><img src="2.jpg" alt="" /></td>
        <td><img src="3.jpg" alt="" /></td>
        <td><img src="4.jpg" alt="" /></td>
        <td><img src="5.jpg" alt="" /></td>
      </tr>
    </table>

    CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    table {
      width: 100%; /* растягиваем таблицу на всю ширину контента */
      border-collapse: collapse; /* схлопываем границы ячеек */
    }
    table td {
      padding: 0 10px; /* для красоты добавляем отступы в ячейках */
    }
    table img {
      width: 100%; /* растягиваем изображение на всю ширину ячейки */
    }

Посмотрите на живой пример вышеописанного.

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

Это не что иное, как очередной баг всеми “любимого” браузера - изображения не сужаются дальше их фактического размера. В нашем случае это 250 пикселей.

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

1
2
3
4
5
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* вот оно, лекарство от недуга IE6 и IE7 */
}

Теперь посмотрите на тот же самый пример, но с использованием этого CSS-трюка.

Теги: , , , автор: Dimox | рубрика CSS-верстка

Комментарии (15): »

  1. 1
    Заводской раб

    Что то я не понял, а как же регулируется высота картинок?

    @
  2. Никогда не сталкивался :)

    @
  3. Если у изображения указана только ширина, то при ее изменении высота изменяется автоматически пропорционально измененной ширине.

  4. В хроме (266) трюк не пашет

  5. В хроме две картинки справа при сужении блокируются. Думается мне тут лучше min-height/min-width использовать

  6. Я в хроме никаких проблем не наблюдаю. Версия 3.0.195.33.

  7. Гм… тоже если честно никогда не сталкивался потому что всегда указываю размеры изображений…
    да и вообще я не сторонник резиновой верстки :)
    Мне даже, если если честно, очень сложно представить где это может пригодиться - это, всё равно если бы менялся размер шрифта в зависимости от размера окна браузера - мягко говоря, это очень странно и не совсем правильно.

  8. А как же разный размер мониторов? Неужели приятно на 20+ мониторе смотреть сайт, подогнанный под 1024 пикселя (по ширине конечно)?

  9. Вот наглядный пример - http://v-tambove.ru/afisha По-моему, выглядит очень даже здорово.

  10. Полезная фича, надо бы сохранить себе…

    p.s. Читаю тебе по подписке уже год наверное, тут зашел, думал урлом сначала ошибся, дизайн другой совсем )

  11. Ты что-то путаешь. Этот дизайн уже года три стоит.

  12. Это тема для очередного холивара. Одни сторонники того, что всё должно растягиваться, а другие считают, что не нужно париться, а браузеры просто должны уметь зумировать сайт (Ctrl + колесико мышки).

  13. 13
    Живой

    А что есть еще люди, кто пользуется ИЕ ?!
    Я вот недавно с Оперы на Хром перешел - почти всем доволен!
    Опера зараза ресурсы жрет, а у мну комп дохловат.
    А Хром хорош! Вот только один минус напрягает - горизонтальная прокрутка внизу. В Опере можно было настроить отображение “по ширине” и никаких проблем, а тут - не нашел у Хрома такой настройки. Если в курсе как это делается - подскажите!
    А вчера плагин для Хрома нашел зашибатый - тИЦ показывает сайта, на котором находишься ;)

    @
  14. 14
    Ника Чудо

    А чем же файрфокс не устраивает? Он жрёт ресурсов меньше чем Опера, и плагинов до кучи и тИЦ и ПР и много других показателей сайта будут показывать)

  15. 15
    Живой

    Да против Лисы ничего не имею! )
    Но не идет он у меня (
    Раньше работал на нем - кульно все было.
    Но как-то после переустановки отказался работать - и что я ни делал - оживить его уже не мог. Тогдато и перешел на Оперу - единственный браз который стал у меня работать без капризов. Ну а щас вот Хрома юзаю и горя не знаю ))).

    @

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге dimox.name:

  1. Первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

Подписаться, не комментируя

Предыдущие из рубрики