Секреты Всемирной Паутины

Мы часто встречаемся с багами IE6 при верстке сайта. Некоторые веб-дизайнеры напрочь отказываются от тех элементов, которые неправильно отображаются в IE, но можно обойти эти преграды.

Вот некоторые ошибки, которые могут встретиться вам при тестировании сайта в IE6.

1. Проблемы с размерами блоков.

Возможно, это самая частая проблема с которой встречаются дизайнеры… Например вы определяете стили блоку:
div#box {

width: 100px;

border: 2px solid black;

padding: 10px;

}

Internet Explorer 6 посчитает ширину блока равной 100 px, но другие браузеры определят ее в 124 px.

Это несоответствие может вызвать огромные проблемы в позиционировании элементов.

Решение этой проблемы следущее: если внутри блока находится текст, например в теге <p>, то свойство padding следует задавать именно тексту, а не блоку.

2. Ошибка с отступом от края.

Приведем еще один пример блока:
div#box {

float: right;

margin-right: 20px;

}

Internet Explorer 6 удвоит отступ от правого края с 20px до 40px, снова, вызывая проблемы в позиционировании.

Эту ошибку также следует решать используя свойство padding для внутренних элементов блока.

3. Проблемы с минимальной шириной и высотой.

Установка минимальной ширины и высоты элементов не только неправильно понимается браузером IE, а вообще игнорируется.

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

4. Эффекты при наведении мышью.

Большинство современных браузеров поддерживает эффекты при наведении мышью для любого элемента, но IE6 большинство из них не поддерживает.

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

5. Отсутствие поддержки прозрачности в png файлах.

К сожалению, IE не поддерживает прозрачность в картинках с расширениями png, хотя прекрасно работает с такими файлами без прозрачных элементов.

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