В CSS, как сделать, чтобы одна строка выполнялась, только если это IE6 или IE7

Question

У меня есть этот код:

#left-nav #left{
  width:100px;
  height: 99px;
  float:left;
  border-bottom: 1px solid #344a53;
  margin-top:-1px;
}

Я хочу иметь возможность выполнять margin-top:-1px, только если это не IE7 или IE8.Также кто-нибудь знает эту проблему с кросс-браузерной совместимостью?Я должен делить бок о бок в другом div, но по какой-то причине в Chrome Firefox и IE8 я должен использовать margin-top: -1px, потому что div сверху был на 1 пиксель вниз.

<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

Левый и правый div по какой-то причине находятся в 1 пикселе от прикосновения к заголовку, но контейнер по-прежнему касается его идеально.

Answer 1

Быстрый и простой способ - использовать условные выражения IE.

<!--[if IE 6]>
 <link type="text/css" rel="stylesheet" href="/ie6.css" />
<![endif]-->

Вы также можете использовать такие вещи, как

<!--[if IE lte 7]>

Для, если IE версии 7 или ниже.

См. http://www.quirksmode.org/css/condcom.html для получения дополнительной информации

Answer 2

Используйте условные комментарии , чтобы настроить CSS на IE6 / 7:

<!--[if IE 6]><link rel="stylesheet"  type="text/css" media="all" href="ie.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet"  type="text/css" media="all" href="ie.css" /><![endif]-->

И тогда в ie.css вы получите это правило:

#left-nav #left{
    margin-top: 0;
}

Вы должны убедиться, что файл ie.css включен после вашего основного CSS-файла, чтобы он переопределял margin-top: -1px.

По теме отрицательного поля я стараюсь их не использовать.поскольку они имеют тенденцию вызывать проблемы.Гораздо безопаснее использовать:

#left-nav #left{
    position: relative;
    top: -1px;
}

Answer 3

Хаки работают, но почему бы не пересмотреть то, что вы уже сделали, чтобы избежать их?Использование инфраструктуры с автоматическим заполнением и определенными пробелами, такими как сетки Blueprint, YUI или 960, может очень помочь и избежать взломов ... особенно в Blueprint и YUI с их браузером "сбрасывает" Используя эти простые и понятные CSS, я, честно говоря, могуне помню, когда в последний раз я использовал хак - наверняка прошло больше года.

Если бы я был игроком на пари, я бы сказал, что с твоим поплавком что-то происходит рядом.Пример стороны вы упомянули.Попробуйте простой тест сброса с плавающей запятой:

.clear {
  clear: both;
}

, а затем после соседних div вставьте

<div class="clear"></div>

Если вы заметили какие-либо изменения, это была проблема с плавающей запятой.Довольно распространенная проблема.

Answer 4

Отвечая на вопрос в заголовке, вы можете применить свойство только к IE 6 и 7, используя star hack , если у вас нет действительного CSS.

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