Сброс CSS-параметров или добиваемся кросс-браузерности | SelkinVitaly.RU
Сброс CSS-параметров или добиваемся кросс-браузерности | SelkinVitaly.RU

Добиваемся совместимости в браузерах

Рубрика: CSS

Просмотров: 1756

Приветствую, товарищи! Хотел рассмотреть очень интересный момент.

Я частенько при кодировании сталкиваюсь с проблемой интерпретации кода браузерами. Как показывает практика, больше хлопот доставляет майкрософтовский Internet Explorer. В своё время много намучился, и, наконец-то, решение было найдено на сайте одного западного товарища. Сейчас я адрес не вспомню, но содержание статьи запомнил основательно.

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

Вот простенький пример:

Инетрепретация кода Оперой

А теперь данный код в Internet Explorer:

Инетрепретация кода Эксплорером

Различия не существены, но они будут иметь огромное значение при создании полноценных сайтов, когда весь каркас падёт прахом. Итак, перед тем как приступить к кодировке, нужно обнулить CSS-параметры следующим кодом:

  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,
  b, u, i, center,
  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-size: 100%;
  vertical-align: baseline;
  background: transparent;
  }
  body {
  line-height: 1;
  }
  ol, ul {
  list-style: none;
  }
  blockquote, q {
  quotes: none;
  }
  /* remember to define focus styles! */
  :focus {
  outline: 0;
  }
  /* remember to highlight inserts somehow! */
  ins {
  text-decoration: none;
  }
  del {
  text-decoration: line-through;
  }
  /* tables still need 'cellspacing="0"' in the markup */
  table {
  border-collapse: collapse;
  border-spacing: 0;
  }

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

На этом мы подходим к концу! До свидания!


Добавление комментария:

Имя *:

Email:

Текст *:

Символы на картинке *:

RSS-подписка
RSS-подписка на статьи по основам сайтостроения RSS-подписка на полезные уроки по web-языкам
Разделы статьй
Каталог товаров
Разделы уроков
Последние статьи
Последние уроки