Решаем проблему с кроссбраузерностью сайта

Решаем проблему с кроссбраузерностью сайта

Наверное, браузер Internet Explorer является главным врагом верстальщиков. Но и к IE можно найти подход и достичь кроссбраузерность. Почти все браузеры ведут себя одинаково, поэтому с ними почти нет никаких проблем, а вот с IE поработать стоит. Например IE высчитывает padding, margin, width и складывается всё вместе, получая новую ширину элемента. То есть, например у нас есть класс block, у него указано width:20px;padding:5px;margin:5px;, в итоге у нас получится блок, шириной в 30px, хотя другие браузеры предпочтут ширину в 20 пикселей. Из за этого в IE дизайны выглядят криво. Как подобные ситуации исправить я опишу в следующей статье. А сейчас я поговорю про некоторые решения проблем кроссбраузерности.

Итак, поговорим о стилях. IE давно поддерживал «условные комментарии», которые позволяли делать часть кода видимым только для IE. Проще говоря, в зависимости от самого комментария, браузер делает видимым часть html-кода. Например

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="all-ie. css" />

<![endif]-->

Приведённый выше условный комментарий будет понятен всем версиях IE (начиная с версии 5+)

Если Вам нужно подключить стили для определённой версии IE, то нужно использовать этот код (для примера я взял версию IE-5)

<!--[if IE 5.0]>

<link rel="stylesheet" type="text/css" href="ie-5.0.css" />

<![endif]-->

Так же можно подключать стили для версий например 5 и выше

<!--[if gte IE 5]>

<link rel="stylesheet" type="text/css" href="ie-5.0.css" />

<![endif]--> gte — Это так сказать логический оператор. «Больше или равно». Вот остальные логические операторы.

Lt — Меньше lte — Меньше или равно gt — Больше gte — Больше или равно

Что бы было понятнее, нужно создать файлы стилей, которые предназначены только для IE. Так же можно подключать стили, узнав версию браузера через jQuery. Но если у пользователя будет выключен JavaScript, он стили не увидит, нужно прописать стиль для пользователей с отключенным JavaScript. То есть вот так — <noscript>Подключение стилей</noscript>. Но что бы не прибегать к этим условным операторам и jQuery, можно в самих стилях прописывать стили для IE. То есть, например, что бы у нас был фон для браузера IE всех версий, надо перед самим свойством поставить два слеша «//». Получится примерно так — //background: green;. Для версии IE 6 можно поставить вместо слеша знак минуса «-».

Если вдруг у Вас нет под рукой браузера IE или ещё каких либо браузеров для проверки кроссбраузерности сайта, используйте сервис BrowserShot, надеюсь его все знают. Это бесплатный онлайн сервис, с помощью которого Вы сможете достаточно быстро и наглядно проверить кроссбраузерность сайта. Так же время от времени стоит проверять страницу на наличие html и css ошибок. Как показывают эти сервисы, у меня куча ошибок. Плохо что в моём дизайне нет этих условных операторов. Когда верстал макет, забыл про них.

На этом вроде бы всё, до встречи!


Карта сайта


Информационный сайт Webavtocat.ru