Часто для Internet Explorer`а потрібно писати свої стилі і для цього переважно додають файлики ie.css, ie7.css, ie8.css, ... які запихають в умовні коментарі ось так:

<!--[if IE]>
<link href="ie.css" type="text/css"/>
<![endif]-->
<!--[if IE8]>
<link href="ie8.css" type="text/css"/>
<![endif]-->
<!--[if IE7]>
<link href="ie7.css" type="text/css"/>
<![endif]-->

Основна перевага цього методу в тому що спеціальні стилі для IE є в окремих файлах і «нормальні» браузери не бачать цих «хаків».

Але я не люблю цей спосіб і ось чому - такий код важко підтримувати. Уявімо що сайт пишуть 2 людини. Людина яка верстає вона все тримає в голові і легко порозпихає хаки для IE по різних файликах. Але коли друга людина захоче зробити якусь будь-яку зміну в стилі - вона ж не знає де які стилі переписуються, і їй доведеться пошукати в кожному файлі ie.css, ie7.css, ie8.css (а в майбутньому і ie9.css, ie10.css, ...) чи даний стиль не переписується для IE і тільки тоді робити зміну. Фактично приходиться постійно усно мерджити всі ці файли.

Тому деякий час популярними були CSS-хаки - для IE6 це було «html *», для IE7 - «*:first-child+html» і т.д. Стилі для IE переписувалися в тому ж файлі в якому оголошувався стиль, наприклад:

.some-button {
  width: 50px;
}
*:first-child+html .some-button {
  width: 48px; /* for IE7 only */
}

і це було дуже зручно - коли хтось міняє стиль width для .some-button він зразу бачить що для IE цей стиль чомусь переписаний і поміняє зразу для IE, і йому не треба лазити по різних файликах і шукати де ще може переписуватись .some-button. Достатньо просто проскролити до низу правила і подивитись чи воно там не переписується.

Але css-хаки це погано, бо зменшується швидкодія (*:first-child+html - не надто оптимальне правило) і зменшується читабельність.

Тому є кращий спосіб - навішати на елемент <html> класи для IE - .ie, .ie7, .ie8, ..., .lt-ie8, .lt-ie8, ... («lt» означає «less than»). Наприклад для IE7 елемент html буде виглядати так:

<html class="ie ie7 lt-ie8 lt-ie9 lt-ie10">

І тоді можна переписати стилі так:

.some-button {
  background-image: url(data:image/gif;base64,R0lGODl...);
}
.lt-ie8 .some-button {
  background-image: url(button-bg.gif);
}

Тут для прикладу для всіх браузерів буде вкладена картинка, а для браузерів IE7 і старіших буде зовнішня картинка, оскільки IE7 не підтримує data uri.

Ці стилі (.ie, ie7, ...) можна легко згенерувати на стороні сервера чи на стороні клієнта javascript`ом.

Основна перевага цього методу написання спеціальних стилів під IE в тому що такий код підтримувати набагато легше.