есть ли IE8 только CSS hack?

для Internet Explorer 8 (IE8) я хотел бы использовать следующий CSS:

color : green;

Я хотел бы применить хак, который влияет только на IE8, а не на IE9, IE6 и 7.

11 ответов


используйте условные комментарии в HTML, например:

<!--[if IE 8]>
<style>...</style>
<![endif]-->

смотрите здесь: http://www.quirksmode.org/css/condcom.html

вы можете проверить версии IE надежно, а также быть уверены, что другие браузеры не будут путать.


используйте медиа-запросы для разделения каждого браузера:

/* IE6/7 uses media, */
@media, { 
        .dude { color: green; } 
        .gal { color: red; }
} 

/* IE8 uses  */
@media all { 
        .dude { color: brown; } 
        .gal { color: orange; }
} 

/* IE9 uses  */
@media all and (monochrome:0) { 
          .dude { color: yellow; } 
          .gal { color: blue; }
} 

/* IE10 and IE11 both use -ms-high-contrast */
@media all and (-ms-high-contrast:none)
 {
 .foo { color: green } /* IE10 */
 *::-ms-backdrop, .foo { color: red } /* IE11 */
 }

ссылки


использовать .

color: green;
Я do рекомендовать условные комментарии, так как вы хотели бы исключить IE9, а также, и это еще непредсказуемо, повлияет ли этот хак на IE9, а также или нет.

независимо от того, у меня никогда не было необходимости в конкретном взломе IE8. Что это, конкретная проблема IE8, которую вы хотели бы решить? Это рендеринг в режиме стандартов IE8 в любом случае? Его метод очень хорош.


при необходимости небольшие изменения в использовании CSS \9 Он нацелен на IE8 и ниже (IE6, IE7, IE8)

.element { 
   color:green ;
 }

лучший способ-использовать условные комментарии в HTML, например:

<!--[if IE 8]>
<style>...</style>
<![endif]-->

делать что-то вроде этого должно работать на вас.

<!--[if IE 8]> 
<div id="IE8">
<![endif]--> 

*Your content* 

<!--[if IE 8]> 
</div>
<![endif]--> 

тогда ваш CSS может выглядеть так:

#IE8 div.something
{ 
    color: purple; 
}

поэтому недавний вопрос побудил меня заметить набор селекторов для исключения IE 8 только.

.selector, #excludeIE8::before {} заставит IE 8 выбросить весь набор селекторов, в то время как 5-7 и 9-11 будут читать его просто отлично. Любой из :: селекторы (::first-line, ::before, ::first-letter, ::selection) будет работать, я просто выбрал ::before так точно читает. Обратите внимание, что цель подделки ::before селектор в быть подделка, поэтому не забудьте изменить его на что - то другое, если у вас есть элемент с ID excludeIE8

интересно, что в современные браузеры (FF 45-52, GC 49-57, Edge 25/13) плохой :: селектор съедает весь набор селекторов (dabblet demo). Это кажется что последняя версия Safari для Windows (и lte IE 7, lol) не имеет такого поведения, все еще понимая ::before. Кроме того, я ничего не могу найти в спец, чтобы указать, что это предполагаемое поведение, и так как это вызовет поломку на любом селекторе set содержит: ::future-legitimate-pseudoelement... Я склонен сказать, что это жук - и тот, который будет грызть наши тылы в будущем.


однако, если вы хотите что-то только на уровне свойств (а не на уровне правил), у Ziga выше было лучшее решение через добавление   (пространство ключей; не копипасте, что inline как он использует nbsp):

/*property-level hacks:*/
/*Standards, Edge*/
prop:val;
/*lte ie 11*/
prop:val;
/*lte ie 8*/
prop:val ;
/*lte ie 7*/
*prop:val;
/*lte ie 6*/
_prop:val;

/*other direction...*/
/*gte ie 8, NOT Edge*/
prop:val;

примечание, Я чувствую, как грязный некромант - но я хотел где-то документировать Хак селектора exclude-IE8-only, который я нашел сегодня, и это казалось самым подходящим местом.


можете ли вы не использовать хак, который вы уже показали, а затем использовать IE7 и ниже hack, чтобы переопределить его?


существуют различные способы получить класс на элемент HTML, определяя, с какой версией IE вы боретесь:Modernizr на HTML 5 Boilerplate и т. д. - Или просто свернуть свой собственный. Затем вы можете использовать этот класс (например .lt-ie9) в обычном селекторе CSS не требуется взлом. Если вы хотите повлиять только на IE8, а не на предыдущие версии, верните старое значение с помощью a .lt-IE8 селектор.


Это будет работать для следующих версий IE8

.lt-ie9 #yourID{

ваш код css

}


только для родного браузера IE8:

.classname{
    *color: green; /* This is for IE8 Native browser alone */
}

Я искал хороший вариант для IE10 и ниже CSS-стиля (но он будет работать только для IE8), и я придумал эту идею:

<!--[if lt IE 10]><div class="column IE10-fix"><![endif]-->
<!--[if !lt IE 10]><!--><div class="column"><!--<![endif]-->

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

это W3C действительно, а не странный CSS-Хак.