CSS-трюк: IE, таблица и «резиновые» изображения
Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился.
Я с этим багом (да, речь пойдет об очередном баге IE) никогда не сталкивался, поэтому решил написать об этом пост, во-первых, как шпаргалку для себя на будущее, во-вторых, вдруг кто-то из читателей и посетителей блога однажды столкнется с такой же проблемой.
Рассмотрим пример. Суть заключается в следующем:
- У нас имеется «резиновая» страница, которая растягивается на всю ширину окна браузера.
- Имеем таблицу с шириной 100%.
- В таблице имеем ряд из 5-ти изображений (в нашем примере их реальная ширина — 250 пикселей), и необходимо, чтобы при изменении ширины окна браузера эти изображения растягивались или сужались пропорционально, заполняя всю ширину таблицы. Реализуется это следующим простым способом:
HTML:
<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:
table { width: 100%; /* растягиваем таблицу на всю ширину контента */ border-collapse: collapse; /* схлопываем границы ячеек */ } table td { padding: 0 10px; /* для красоты добавляем отступы в ячейках */ } table img { width: 100%; /* растягиваем изображение на всю ширину ячейки */ }
Посмотрите на живой пример вышеописанного.
Все замечательно, за исключением одного «но» — если смотреть этот пример в браузере IE6 или IE7, вы заметите, что при сужении окна браузера ширина изображений в определенный момент «застревает» и не они не сужаются дальше, в результате чего таблица вылазит за пределы контента.
Это не что иное, как очередной баг всеми «любимого» браузера — изображения не сужаются дальше их фактического размера. В нашем случае это 250 пикселей.
Ну а трюк, который позволяет исправить это недоразумение, заключается всего в одной строчке CSS-кода, который нужно применить к таблице, в которой расположены наши изображения:
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* вот оно, лекарство от недуга IE6 и IE7 */
}
Теперь посмотрите на тот же самый пример, но с использованием этого CSS-трюка.
Комментарии (33)
Спасибо!
Спасибо большое за совет — помогло мне «зарезинить» блок подписки, который при масштабировании темы вылазил за пределы sidebar’a.
Перелопатил кучу примеров а ответ нашел здесь. Спасибо!