Archive for 11 April, 2008
11April2008
IE vs FireFox
Posted by Сергей Прогонный under: CSS; HTML.
Данная заметка посвящена не баталиям между производителям или отличиям данных браузеров, а тому как эти отличия свести на нет.
Для этого используются так называемые “хаки”.
HTML-хак достаточно простой в использоании
<!--[if lte IE 6]> *видит только IE6 и более ранние версии* <![endif]-->
<!--[if IE 7]> *видит только IE7* <![endif]-->
<!--[if IE 7]><!--> *видит IE7, Firefox и Opera* <!--<![endif]-->
В то же время для остальных браузеров этот код будет выглядеть как обычный комментарий. Комбинации таких хаков позволяют для разных браузеров отобразить разный HTML-код на той же странице.
Использование CSS-хаков позволяет не менять HTML-код для получения требуемого результата. Рассмотрим пример оформления таблицы:
table tr td { background: red; }
table tr > td { background: green; }
В этом случае для IE 6 и более ранних версий ячейка в таблице будет залита красным цветом, а в IE7, Firefox, Opera - зеленым.
По сути записть “tr > td” означает, что данный стиль следуюет применить для всех тегов td являющихся прямым наследником тега tr. Браузеры IE версии 6 и старше не понимают такой записи, потому просто игнорируют ее.
Таким образом чтобы дифференцировать стили для IE и для Firefox нам следует написать необходимый CSS-код для IE6, а далее воспользовавшись этим хаком переопределить необходимые значения для требуемых параметров.
Используем хаки на примере кроссбраузерного каркаса - в IE 6 мы получим две колонки; в IE7, Firefox, Opera - три колонки. Смотреть