Рано или поздно все web-разработчики сталкиваются с ситуацией, когда Internet Explorer становится проблемой, тормозящей разработку проекта. Сайт свёрстан валидно, по стандартам. Нормально отображается в Mozilla, Opera, Safari и других нормальных браузерах. Но. Открываем его в IE. И видим. Как то, что мы подгоняли по пикселям, строго придерживаясь стандартов, размазано по странице. Ладно ещё в IE7 можно более-менее просто подогнать вёрстку (конечно зависит от дизайна), но от IE6 иногда волосы встают дыбом. К счастью, существуют способы, которые позволяют повлиять на ситуацию. Кто-то использует хаки, кто-то — conditional comments. Где-то можно пойти на компромис и упростить задумку дизайнеров, поддерживая пользователей недобраузеров.

В итоге можно добиться адекватного отображения сайта во всех популярных браузерах включая IE6 и IE7 которые, к сожалению, пока самые популярные. Но что мы получаем? Как правило, это один или несколько CSS файлов для IE. Или куча дополнительных свойств // или _. Всё это затрудняет поддержку сайта, внесение изменений, добавление новых элементов в вёрстку. Всегда остаётся шанс, что где-то что-то забыли подправить или не убрали стиль который работал только в IE.

Недавно нашёл очень интересное решение которое избавляет от множества проблем с IE. Сайт проекта. Решение написано на JavaScript.

На сайте проекта заявлены следующие возможности:

• supports the following CSS selectors:
  
  • parent > child
  • adjacent + sibling
  • adjacent ~ sibling
  • [attr], [attr=«value»], [attr~=«value»] etc
  • .multiple.classes (fixes bug)
  • :hover, :active, :focus (for all elements)
  • :first-child, :last-child, only-child, nth-child, nth-last-child
  • :checked, :disabled, :enabled
  • :empty, :contains(), :not()
  • :before/:after/content:
  • :lang()
  
  
• supports imported style sheets
• preserves the cascade of the style sheet
• does not alter the document structure
• does not repeatedly query the DOM tree using JavaScript
• uses pure CSS to enforce style sheet rules
• supports the W3C box model in both standards and quirks mode
• supports fixed positioning (flicker free)
• supports overflow:visible
• supports min/max-width/height
• fixes broken (X)HTML elements (abbr, object)
• standardised forms behavior
• supports PNG alpha transparency
• lightweight script (11KB)
• works for Microsoft Internet Explorer 5+ (Windows only)

На мой взгляд — отличный список возможностей.
Для того чтобы скипт заработал, нужно просто подключить его к странице. После загрузки он применяет стили непонятные IE к элементам страницы и выполняет дополнительные операции для поддержки стандартов.

Да. За всё надо платить. Естественно без поддержки JavaScript решение работать не может и на скорость это, хоть не сильно но, влияет. Как правило — пользователи IE это «среднестатистические пользователи», которые не отключают JavaScript, а небольшие замедления при загрузке страниц — не самая большая их проблема.

Зато мы получаем возможность использовать много вкусностей CSS типа :first-child, parent > child, [attr=«value»]. О которых, раньше, IE заставлял нас забывать.

Лично я буду использовать это решение в своих проектах.

Мне очень интересно услышать мнения хабрапользователей относительно этого решеня.