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

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

  1. Объявляю правильный doctype (предпочтительнее использовать Strict).
  2. Адаптирую шаблон под новые браузеры.
  3. Только после выполнения второго пункта, приступаю к адаптации под старые браузеры.

Адаптация под ИЕ происходит с использованием условных комментариев, с помощью которых подключаются стили, написанные специально для конкретной версии браузера. В них пишутся только те правила CSS, которые отличаются от общих.

ИЕ очень не любит, когда для позиционирования плавающего (float) объекта задают left и margin-left одновременно. Особенно ИЕ не дружит со свойством left. Например,  с ИЕ 7 и старше, будут проблемы, если контейнер для копирайта и контейнер для информации о разработчиках сайта пытаться позиционировать свойствами margin-left и left одновременно.

.copyright-container { position: relative; float: left; width: 30%; margin-left: 298px; } .made-container { position: relative; float: left; width: 25%; left: 650px; } 

Понравилась статья? Поделиться с друзьями:
Комментарии: 5
  1. хостинг

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

  2. Artem

    Это не пост-это огрызок

  3. Alexey

    Трехстрочная чухня ниочем…

    1. FORTRESS-DESIGN (автор)

      Для меня это когда-то было очень ценной информацией. В посте малобукав, но много смысла. :) Именно объявление доктайп решало многие проблемы, возникающие в кроссбраузерной верстке. А знание того, как ИЕ реагирует на внутренние и внешние отступы также избавляло от многих проблем. А использование условных комментариев — вообще было панацеей в обходе кривизны ИЕ.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: