web-dev-qa-db-ger.com

IE8-CSS-Auswahl

Um Elemente nur in IE -Browsers anzuvisieren, verwende ich

IE6:

* html #nav li ul {
    left: -39px !important;
    border: 1px solid red;
}

IE7:

*+html #nav li ul  {
    left: -39px! important;
}

Weiß jemand, wie man IE8 anvisiert?

45
Chris

Ich werde nicht in eine Debatte darüber einsteigen, ob diese Methode verwendet werden soll oder nicht, aber dadurch können Sie bestimmte CSS-Attribute nur für IE8-9 festlegen fragte):

Verwenden Sie nach jeder CSS-Deklaration '\ 0 /', also:

#nav li ul  {
  left: -39px\0/ !important;
}

Um eine weitere Antwort aufzubauen, können Sie dem IE6, IE7 und IE8 verschiedene Stile zuweisen:

#nav li ul  {
   *left: -7px    !important; /* IE 7 (IE6 also uses this, so put it first) */
   _left: -6px    !important; /* IE 6 */
    left: -8px\0/ !important; /* IE 8-9 */
}

quelle: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

84
Nick

2013-Update: IE10 + unterstützt keine bedingten Kommentare mehr.

Ursprüngliche Antwort:

Einige Leute scheinen verwirrt zu sein, weil dies nicht den Buchstaben der Frage beantwortet, nur der Geist - so zur Klarstellung:

Es gibt keine Browserauswahl. Es gibt Hacks, die Fehler und/oder Pannen in den CSS-Parsern bestimmter Browser ausnutzen, aber wenn man sich darauf verlässt, sind sie auf Fehler eingestellt. Es gibt eine akzeptierte Standardmethode, um damit umzugehen:

Verwenden Sie bedingte Kommentare , um nur IE anzuvisieren.

Beispiel:

<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->

Alles in den beiden <!--> wird von allen Nicht-IE-Browsern als Kommentar ignoriert, und IE -Versionen, die kleiner als IE8 sind, überspringen es. Nur IE8 und höher wird es verarbeiten. 2013 update: IE10 + wird es auch als Kommentar ignorieren.

75
Rex M

Schauen Sie sich diese an:

/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }

/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }

(Quelle: David Blooms CSS-Hack für den IE8-Standardmodus )

26
Gumbo

sie können wie folgt verwenden. Es ist besser als 

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

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie7"> <![endif]-->
  <!--[if IE 8 ]> <body class="ie8"> <![endif]-->
  <!--[if !IE]>--> <body> <!--<![endif]-->

div.foo {color: erben;} . ie7 div.foo {color: # ff8000; }

14
image72

Aufbauend auf der exzellenten Antwort von image72 könnten Sie tatsächlich erweiterte CSS-Selektoren wie diese haben:

<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->

damit Sie dies in Ihrer CSS tun können:

.notIE   .foo { color: blue;   } /* Target all browsers except IE */
.IE9up   .foo { color: green;  } /* Taget IE equal or greater than 9 */
.IE8     .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red;    } /* Target IE equal or less than 7 */

.IE8 .foo, .IE9 .foo {
    font-size: 1.2em;            /* Target IE8 & IE9 only */
}

.bar { background-color: gray; } /* Applies to all browsers, as usual */

/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none;  } /* Any browser except IE */
.IE    #betterBrowser { display: block; } /* All versions of IE */

Das ist großartig, weil:

  • Es ist absolut normkonform (keine hässlichen/gefährlichen CSS-Hacks)
  • Es müssen keine separaten Stylesheets erstellt werden
  • Sie können leicht jede Version von IE sowie komplexe Kombinationen anvisieren
11
MrFusion

CSS-Stil nur für IE8:

.divLogRight{color:Blue; color:Red\9; *color:Blue;}

Nur IE8 wird Rot sein.

erstes Blau: für alle Browser.

Rot: Nur IE6,7,8

Zweites Blau: Nur IE6,7


Also rot = nur für IE8.

Eine vollständige Zusammenfassung der Browser-Hacks (einschließlich Internet Explorer (IE), Safari, Chrome, iPhone und Opera) finden Sie unter folgendem Link: http://paulirish.com/2009/browser-specific-css- Hacks/

11
SirMoreno

Diese Frage ist uralt, aber ..

Gleich nach dem eröffnenden Body Tag ..

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

Kurz vor dem abschließenden Body-Tag ..

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

CSS ..

#IE8Body #nav li ul {}

Sie können dies für alle IE - Browser mit bedingten Anweisungen tun. OR zielt auf ALLE Browser ab, indem Sie den gesamten Inhalt in einem div mit dem Browsernamen und der serverseitigen Version kapseln

11
anon

In Anbetracht des sich entwickelnden Threads finden Sie unten eine vollständigere Antwort:

IE 6

* html .ie6 {property:value;}

oder

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

oder

*:first-child+html .ie7 {property:value;}

IE 6 und 7

@media screen\9 {
    .ie67 {property:value;}
}

oder

.ie67 { *property:value;}

oder

.ie67 { #property:value;}

IE 6, 7 und 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

oder

@media \0screen {
    .ie8 {property:value;}
}

Nur IE 8-Standardmodus

.ie8 { property /*\**/: value\9 }

IE 8,9 und 10

@media screen\0 {
    .ie8910 {property:value;}
}

Nur IE 9

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 und höher

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 und 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

Nur IE 10

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 und höher

_:-ms-lang(x), .ie10up { property:value; }

oder

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (und darüber ..)

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascript-Alternativen

Modernizr

Modernizr wird beim Laden der Seite schnell ausgeführt, um Funktionen zu erkennen. Es dann erstellt ein JavaScript-Objekt mit den Ergebnissen und fügt Klassen zur .__ hinzu. HTML-Element

Benutzeragentenauswahl

Das Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Fügt dem html-Element (z. B.) Folgendes hinzu:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Zulassen sehr gezielter CSS-Selektoren, z.

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Fußnote

Vermeiden Sie, wenn möglich, Browser-Targeting. Identifizieren und beheben Sie alle Probleme, die Sie identifizieren. Unterstützung progressive Verbesserung und graceful degradation . Vor diesem Hintergrund ist dies ein Szenario einer „idealen Welt“, das in einer Produktionsumgebung nicht immer erreichbar ist. Daher sollte das oben Genannte einige gute Optionen bieten.


Namensnennung/Wesentliches Lesen

4
SW4

Ich habe eine Lösung, die ich nur verwende, wenn ich muss, nachdem ich meine HTML- und CSS-Codes erstellt und in den meisten Browsern gearbeitet habe. Ich mache gelegentlich einen Hack mit diesem erstaunlichen Javascript von Rafael Lima. http://rafael.adm.br/css_browser_selector/

Es behält meine CSS & HTML-Gültigkeit und Sauberkeit bei. Ich weiß, dass es nicht die ideale Lösung ist, JavaScript mit Hilfe von Hacks zu korrigieren, aber solange Ihr Code ursprünglich so nah wie möglich ist (dumme IE bricht manchmal Dinge), bewegt er sich etwas ein paar px mit Javascript ist kein so großer Deal, wie manche Leute denken. Aus Zeit-/Kostengründen ist dies eine schnelle und einfache Lösung.

4
Ammi J Embry

In der ASP.NET-Welt habe ich tendenziell die integrierte BrowserCaps-Funktion verwendet, um eine Reihe von Klassen auf das body-Tag zu schreiben, mit denen Sie auf jede Kombination von Browser und Plattform zugreifen können.

Beim Pre-Rendering würde ich also so etwas wie den folgenden Code ausführen (vorausgesetzt, Sie geben Ihrem Tag eine ID und lassen es auf dem Server ausführen):

HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);

Mit diesem Code können Sie dann einen bestimmten Browser in Ihrem CSS wie folgt auswählen:

.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }

Wir erstellen eine Unterklasse von System.Web.UI.MasterPage und stellen sicher, dass alle unsere Masterseiten von unserer spezialisierten MasterPage erben, sodass für jede Seite diese Klassen kostenlos hinzugefügt werden.

Wenn Sie sich nicht in einer ASP.NET-Umgebung befinden, können Sie jQuery verwenden, das über ein Browser-Plugin verfügt, das beim Laden von Seiten ähnliche Klassennamen dynamisch hinzufügt.

Diese Methode hat den Vorteil, dass Sie bedingte Kommentare aus Ihrem Markup entfernen und sowohl Ihre Hauptstile als auch Ihre browserspezifischen Stile in ungefähr derselben Position in Ihren CSS-Dateien beibehalten. Dies bedeutet auch, dass Ihr CSS zukunftssicherer ist (da es nicht auf Fehler beruht, die möglicherweise behoben wurden) und dass Ihr CSS-Code viel sinnvoller wird, da Sie nur sehen müssen

.IE8 #container { .... }

Anstatt 

* html #container { .... }

oder schlimmer!

4
jonsidnell

Ich weiß, dass dies eine alte Frage ist, aber es war das erste Ergebnis bei Google, als ich durchsuchte, und ich glaube, ich habe eine bessere Lösung gefunden als den Vorschlag mit dem höchsten Rang und was das OP gewählt hat.

#nav li ul:not(.stupidIE) { color:red }

Technisch gesehen ist dies das Gegenteil von dem, was das OP wollte, aber das bedeutet nur, dass Sie zuerst die für IE8 gewünschte Regel anwenden und diese dann für alles andere anwenden müssen. Natürlich können Sie alles in das () einfügen, solange es gültiges CSS ist, das eigentlich nichts auswählt. IE8 verschluckt diese Zeile und wendet sie nicht an, aber frühere IEs (ok, ich habe nur IE7 überprüft, ich habe mich nicht mehr um IE6 gekümmert), ignoriere einfach das: not () und wende die Deklarationen an. Und natürlich verwendet jeder andere Browser (ich habe Safari 5, Opera 10.5, Firefox 3.6 getestet) diese css wie erwartet.

Ich denke also, dass diese Lösung, wie jede andere reine CSS-Lösung, davon ausgehen würde, dass die IE - Entwickler Unterstützung für den: Nicht-Selektor hinzufügen, dann werden sie auch das korrigieren, was durch die Diskrepanz zum Ziel von IE8 wurde.

3
Moss

OK, es ist kein css hack, aber aus Frustration, weil ich keine Möglichkeit finden konnte, ie8 von css anzuvisieren, und aufgrund der Politik, dass es keine spezifischen css-Dateien gibt, musste ich Folgendes tun, was ich vermute könnte nützlich sein:

if (jQuery.browser.version==8.0) {
   $(results).css({
         'left':'23px',
         'top':'-253px'
      });
}
2
Zeljko Dakic

\ 9 funktioniert nicht mit font-family , stattdessen müssen Sie "\ 0 /! Important" wie oben erwähnt verwenden. Beispiel:

p { font-family: Arial \0/ !important; }
1
Ricardo Zea

Es gibt keine Auswahlhacks für IE8. Die beste Ressource für dieses Problem ist http://browserhacks.com/#ie

Wenn Sie ein bestimmtes IE8 als Ziel verwenden möchten, sollten Sie einen Kommentar in HTML schreiben

<!--[if IE 8]> Internet Explorer 8 <![endif]-->

oder Sie könnten Attribut-Hacks verwenden wie:

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

Weitere Informationen hierzu finden Sie unter: http://www.paulirish.com/2009/browser-specific-css-hacks/

0
fernandopasik