Антон Молодий підкинув мені ідею для цього поста. Він зіткнувся з проблемою, з якою з моєї непрямої допомогою сам же і впорався.
Я з цим багом (так, мова піде про чергове баге IE) ніколи не стикався, тому вирішив написати про це пост, по-перше, як шпаргалку для себе на майбутнє, по-друге, раптом хтось із Новомосковсктелей і відвідувачів блогу одного разу зіткнеться з такою ж проблемою.
Розглянемо приклад. Суть полягає в наступному:
- У нас є «гумова» сторінка, яка розтягується на всю ширину вікна браузера.
- Маємо таблицю з шириною 100%.
- У таблиці маємо ряд з 5-ти зображень (в нашому прикладі їх реальна ширина - 250 пікселів), і необхідно, щоб при зміні ширини вікна браузера ці зображення розтягувалися або звужувалися пропорційно, заповнюючи всю ширину таблиці. Реалізується це таким простим способом:
Все чудово, за винятком одного «але» - якщо дивитися цей приклад в браузері IE6 або IE7. ви помітите, що при звуженні вікна браузера ширина зображень в певний момент «застряє» і не вони не звужуються далі. в результаті чого таблиця вилазить за межі контенту.
Це не що інше, як черговий баг усіма «улюбленого» браузера - зображення не звужуються далі їх фактичного розміру. У нашому випадку це 250 пікселів.
Ну а трюк, який дозволяє виправити це непорозуміння. полягає всього в одному рядку CSS-коду, який потрібно застосувати до таблиці, в якій розташовані наші зображення: