Кроссбраузерная верстка

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

Естественно, любой веб мастер должен заботится о том, чтобы сайт выглядел одинаково в наибольшем количестве браузеров. Именно это умение (когда код выглядит одинаково в различных браузерах) и называют "кроссбраузерной версткой HTML". Умение верстать такой код - весьма полезно и ценится потенциальными работодателями. Очень часто такое требование стоит одним из первых в условиях, которым должен удовлетворять потенциальный кандидат на вакансию веб программиста в серьезную компанию.
Почему сайт выглядит по разному в различных браузерах?

Существует несколько причин возникновения различного вида сайта на различных обозревателях.

1. Использование нестандартных возможностей HTML.

Дизайнер может использовать возможности, которые не входят в стандарт HTML. Действительно, браузеры могут поддерживать множество различных атрибутов тегов, которые не описаны в стандарте. Использовать эти возможности не рекомендуется. По одной простой причине - если что-либо не описано в стандарте, какой-либо из браузеров может это не поддерживать. И создатели такого браузера будут совершенно правы. Не нужно использовать нестандартные особенности.

Всегда проверяйте написанный вами код на соответствия стандарту.

Приведу классический пример. Рассмотрим следующий HTML код простейшей таблицы.
<table border="1">
<tr height="100">
<td>
Hello world
</td>
</tr>
</table>

Данный код выводит таблицу, состоящую из одной ячейки. Веб дизайнер хочет, чтобы высота первой строки данной таблицы была равна 100 пикселям. Однако, в стандарте HTML у тега <tr> недопустим атрибут height.

В данном случае, ошибка не велика, так как атрибут height у тега <tr> понимают большинство современных браузеров. (Лишь InternetExplorer 4, не распознает этот атрибут). Но в других случаях, пренебрежение стандартом может привести к более плачевным результатам. Наверняка, все из нас бывали на сайтах, на которых какой-либо элемент съезжал либо вбок, либо вниз. Каждый из нас, скорее всего, в душе думал, что сайт делал не профессионал. Хотя, скорее всего, сайт просто не был протестирован на основных типах браузеров. Как правило, сайты создают и тестируют только в InternetExplorer, так как это наиболее популярный браузер среди пользователей. Поэтому, в следующий раз, будем снисходительны, зная, почему происходит потеря внешнего вида.

Правильное решение для примера с табличной - это использование стилей. Вот как может выглядеть "правильный" код:
<table border="1">
<tr style="height:100px;">
<td>
Hello world
</td>
</tr>
</table>

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

2. Значения атрибутов по умолчанию.

У каждого HTML элемента существует множество атрибутов. Это и цвет, и расстояние до соседних элементов, и выравнивание, и многое другое. Когда верстается HTML код, дизайнер обычно задает значения только тех атрибутов, которые для важны для представления элементов на странице. Что же делать браузеру со значениями неуказанных атрибутов? В этом случае браузеры используют значения по умолчанию. И вот тут-то и кроется опасность. Значения по умолчанию у различных браузеров могут различаться. Например, размер шрифта по умолчанию может быть разным. Из-за этого в одних браузерах текст займет больше места, чем в других. Что, в свою очередь, может привести к различиям в отображении страницы.

Как можно решить эту проблему? Во-первых, универсальный совет: проверять отображение сайта в как можно большем количестве браузеров. Во-вторых, можно в css файле задать свои значения по умолчанию для всех элементов, которые используются на странице. Это избавит браузер от необходимости "додумывать" значения свойств HTML элементов. Сделать это можно, например, так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
background-color : white;
}

Таким образом, все элементы на странице будут иметь свойства заданные в данном файле. Если необходимо, чтобы у какого-либо элемента свойства отличались от свойств по умолчанию, то их надо переопределить явно.

3. "Особенности" некоторых браузеров.

Однако, даже если веб мастер использует только стандартные возможности HTML, установил свои атрибуты по умолчанию для всех элементов, сайт все равно может выглядеть по разному в различных браузерах. Это происходит от того, что браузеры сами могут не соответствовать стандарту HTML. Браузеры, как и любое программное обеспечение, могут содержать ошибки. Эти ошибки, как правило, быстро исправляются, однако всегда существует вероятность, что у пользователя установлена не самая свежая версия браузера.
Так же возможно, что производители браузеров (особенно этим грешит MicroSoft) считают, что они лучше знают, как надо отображать тот или иной элемент.

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

Самый распространенный способ - это условные комментарии для IE. Майкрософт, как будто зная о проблемах своего браузера, дала разработчикам способ, как выполнить HTML код только на специальной версии IE. Например, следующий код подключит специальный CSS файл для браузера IE версии 7 и выше: http://msdn2.microsoft.com/en-us/library/ms537512.aspx
<![if gte IE 7]>
<link rel="stylesheet" href="/ie.css" type="text/css" />
<![endif]>

Условные комментарии имеют один единственный недостаток. Страница, включающая в себя такие комментарии, не является валидной HTML страницей. Как видите, Майкрософт и тут нарушает стандарт.