Mit IE bedingten Kommentaren innerhalb eines Sheet

Ich weiß, dass Sie einen IE bedingten Kommentar in HTML verwenden können:Mit IE bedingten Kommentaren innerhalb eines Sheet

<!--[if IE]> 
    <link href="ieOnlyStylesheet.css" /> 
<![endif]-->

Aber was, wenn ich nur IE in einem Sheet, eine CSS-Regel will gezielt einrichten für ein bestimmtes Element innerhalb des HTML. Zum Beispiel können Sie das Chrome/Safari in der CSS-Datei als CSS-Code-Hack verwenden ...

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
}

Aber mit dem IE-Hack in der CSS-Stylesheet wie folgt aus:

<!--[if IE]> 
     .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
<![endif]-->

tut nicht arbeiten. Was verwende ich in einem Stylesheet, um nur IE zu zielen?

Quelle

2012-07-28 Dexter Schneider

Bedingte Kommentare 1) sind kein Hack 2) nicht für CSS, nur HTML. – BoltClock

danke BoltClock, also ich sehe –

Bedingte Kommentare funktionieren nicht in Stylesheets. Stattdessen können Sie bedingte Kommentare in Ihrem HTML verwenden, um verschiedene CSS-Klassen oder IDs auf Elemente anzuwenden, die Sie dann mit CSS anvisieren können.

Zum Beispiel:

<!--[if IE]> 
    <div id="wrapper" class="ie"> 
<![endif]--> 
<!--[if !IE]> 
    <div id="wrapper"> 
<![endif]-->

Auch gibt es Tools wie Modernizr die Feature-Erkennung in einer sehr ähnlichen Art und Weise zu tun (von Klassen zum <html> Element hinzufügen). Sie können damit Ihr Design/Skript für neuere Browser progressiv verbessern und gleichzeitig ältere Browser unterstützen.

Quelle

2012-07-28 18:56:35

Vielen Dank, Ihr Code macht Sinn und es kann verwendet werden, um das zu tun, was ich erreichen möchte ... –

Wie automatisiert Modernizr es? Bitte erklären Sie, wie ich nur wusste, dass Modernizr "erkennt". –

@YannisDran, Sie haben recht, es wird nicht automatisch die IE-Klasse hinzufügen, aber es wird Feature-Erkennung, die Sie dann über CSS zielen können, ist eine ähnliche Möglichkeit. Ich habe die Antwort aktualisiert, um das deutlicher zu machen. –

Sie können keine IE-bedingten Kommentare verwenden, aber Sie können Hacks verwenden. This page of CSS hacks erklärt IE Hacks, die Sie (und mehr) verwenden können.

Quelle

2012-07-28 18:43:24

Danke, beantwortet diese Frage meine Frage (übrigens, ich sah diesen Artikel vorher, ich mache normalerweise ein paar Recherchen, bevor ich auf Stack posten), aber es hat nur eine In-CSS-Lösung für IE 7 und unten nämlich: IE 6 und unter * html {} IE 7 und unter *: first-child + html {} * html {} IE 7 nur *: first-child + html {} ich möchte eine Möglichkeit, alle IE-Browser mit einem In-CSS-Hack zu targeten, aber das scheint nicht möglich zu sein. –

Sie nicht, einfach IE bedingte Kommentare verwenden, um eine bestimmte IE Sheet zu laden:

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

Es gibt CSS-Hacks, aber beachten Sie, dass ein Hack erfordert einen Parsing-Fehler mit (irgendeiner Art) um eine bestimmte CSS-Regel auf einen Browser auszurichten. Diese werden wahrscheinlich in späteren Patches auf eine bestimmte Inkarnation eines Browsers nicht korrigiert, aber sie werden in späteren Versionen korrigiert (so sind IE 9 und 10 nicht von den CSS-Hacks betroffen, die auf IE 6 oder IE 5 für Mac abzielen). ..).

Quelle

2012-07-28 18:44:20

Was Sie tun möchten, ist alles in Ihrem Stylesheet zu stylen, wie Sie normalerweise für jeden anderen Browser tun würden. Nachdem Sie das normale Stylesheet in Ihre Seite importiert haben, importieren Sie ein IE-spezifisches Stylesheet mit der regulären <!--[if IE]> bedingten Anweisung.

Nach dieser Methode werden die Stile für alle Browser importiert und dann werden Ihre IE-spezifischen Stile verwendet, um diejenigen außer Kraft zu setzen, die nicht kompatibel sind, nicht richtig dargestellt werden oder für die Verwendung in IE angepasst werden müssen.

Quelle

2012-07-28 19:10:01

kann es einfacher sein, als das, was Derek Hunziker sagte:

einfach diesen Code enthalten, wie es ist:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head>

Dann können Sie es leicht Ziel, wenn Sie zum Beispiel 8 IE ausrichten möchten und niedriger Sie schreiben:

.lt-ie9 body{css rule here;}

und Sie sind fertig!

Prost

Quelle

2013-10-20 22:54:58

IE Sheet-Hacks

.Class { 
    color: green;  /* standard */ 
    color: green\9; /* IE 8 and below */ 
    *color: green;  /* IE 7 and below */ 
    color: green !ie; /* IE 7 and below */ 
    _color: green;  /* IE 6 */ 
}

Quelle

2013-12-20 01:58:23 pcunite

+13

Bitte nicht verwenden die oben genannten Hacks. Die Informationen sind irreführend und können Ihnen mehr Probleme bereiten als sie lösen. Zum Beispiel zielt der '\ 9'-Hack * nicht auf IE 8 und darunter. Es betrifft IE 7, 8, 9 und 10. Bitte, ** benutze diese nicht **. – Sampson

Mit IE bedingten Kommentaren innerhalb eines Sheet

Antwort

Verwandte Themen