Обеспечиваем кроссбраузерность: проблемы совместимости сайта с разными браузерами и их версиями

Работая над созданием нового сайта или разрабатывая новый шаблон/дизайн для уже существующего всегда будет не лишним проверить его отображение в разных интернет браузерах. Обидно, конечно, но иногда оказывается, что так тщательно выверенная и проработанная верстка сайта в одном браузере безжалостно разъезжается при открытии той же самой страницы через другую программу. Очень не хотелось бы, чтобы посетители сайта вдруг оказывались удивлены лишними строчками меню или были вынуждены искать контент где-то внизу страницы за сайдбаром. В большинстве случаев это побудит их скорее закрыть кривую страничку и больше не возвращаться в это “царство хаоса”. Именно поэтому для вебмастера имеет огромное значение необходимость как можно скорее обнаружить возможные расхождения отображения страниц в разных браузерах и устранить их, то есть, как еще говорят профессионалы – обеспечить кроссбраузерность создаваемого ресурса.

Чаще всего проблемы возникают с браузерами Internet Explorer разных версий. Да, теми самыми IE, которые устанавливаются на компьютеры вместе с системой Windows, а значит, имеются в распоряжении большого количества пользователей. Я и сама все время пользовалась Internet Explorer, пока не увлеклась сайтостроительными делами. А до этого у меня и в мыслях не было хотя бы из любопытства попробовать другой браузер.

По всему видно, что на проблемы совместимости верстки сайта с разными браузерами нельзя закрывать глаза, если, конечно, вы создаете сайт не исключительно для личного пользования через одну и ту же программу, но и для других людей  :)

Этой записью я начинаю цикл статей, посвященный исправлению ошибок в отображении сайта различными браузерами. Это будет своеобразный web-блокнот, куда я буду записывать свои ответы на возникающие по мере моей вебмастерской деятельности вопросы.

Открыть эту широкую тему логичнее всего будет разговором о причинах проблем кроссбраузерности.

По большей части они связаны с тем, что программы-браузеры имеют настройки отображения сайта по-умолчанию. То есть, если вы не указали в стилях сайта какое-либо свойство его элемента, программа додумает за вас и отобразит этот элемент так, как это задано ей по-умолчанию. Например, если не указать в для картинок сайта свойство img {border: 0;} и открыть страницу через Internet Explorer восьмой версии, вы увидите вокруг иллюстраций и баннеров непрошеную синюю рамку. Эта рамка и есть результат “помощи” браузера.

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

Чтобы сбросить все настройки, заданные браузерами для отображения элементов сайта по-умолчанию, необходимо использовать специальный код-”ластик”, который нужно разместить в начале вашего файла стилей style.css. Вот этот код:

Теперь, когда все настройки по-умолчанию сброшены, можно начинать верстать сайт, как говорится, с чистого листа. А я обещаю делиться здесь своими дальнейшими находками по вопросам совместимости сайта с различными браузерами.

Удачи!

Статьи в продолжение затронутой темы:

Что делать, если в Internet Explorer колонка/контент сайта съезжает вниз и влево?

В Internet Explorer все содержимое сайта сдвигается влево. Что делать?

Меню сайта некорректно отображается в Internet Explorer 8: решение проблемы