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

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

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


... Рекомендую сервис автоматической проверки ссылок - единственный сервис, где можно проверить ссылочного донора на спамность. Bсе биржи ссылок и сервисы в одном интерфейсе. Регистрация. ...

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

  • У нас имеется “резиновая” страница, которая растягивается на всю ширину окна браузера.
  • Имеем таблицу с шириной 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, Свобода слова вебмастерского, 2009. | CSS-трюк: IE, таблица и “резиновые” изображения

Мой блог находят по следующим фразам

Ваш отзыв

Я не робот.