Ich versuche, IE 8 & 9 über einen Browser-spezifischen CSS-Hack als nachgewiesen here. Ich verwende jedoch SASS (insbesondere die WebCompiler Visual Studio-Erweiterung) und kompiliert die abschließenden Leerzeichen vor dem Semikolon. SoStoppen Sie SASS aus hinterläufigen Leerzeichen in CSS
.class{ display: none \ ;}
wird
.class { display: none \;}
und bricht den Hack. Gibt es eine Möglichkeit, dies zu umgehen?
Wenn Sie ein Leerzeichen benötigen, können Sie eine leere Zeichenfolge verketten.
SASS:
.class{ display: none \ +'';}
Ausgang:
.class {
display: none \ ;
}
Ich empfehle mit conditional comments in html wie dies zum Ziel:
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]> <html> <![endif]-->
Und in CSS:
.class {display: block;}
.ie8 .class {display: none;}
.ie9 .class {display: none;}
Aber wenn Sie eine sauberere html und eine kleinere CSS pflegen wollen, können Sie einige Javascript Lib zielen auf bestimmte Browser, so etwas wie DetectJS Browser-Name und Version in HTML-Tag als Klasse zu setzen, erzeugen separate Stylesheets für jeden Browser, als sie in Ihrem Kopf anrufen:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->
Denken Sie daran, IE10+ didn't accept conditional comments.
Während ich diese Methode zu schätzen weiß, muss ich in der Umgebung, in der ich arbeite, vermeiden, zusätzliche Stylesheets hinzuzufügen, insbesondere für eine CSS-Zeile. – Timestretch
Sie können also js verwenden, um dem Body eine Browserinfo hinzuzufügen, und dann '.ie8 .class, .ie9 .class {display: none;}' in Ihre vorhandene Stylesheet-Datei einfügen. –
Haben Sie die SASS oft neu kompiliert werden müssen? Ich würde sagen, nehmen Sie das resultierende CSS, ersetzen Sie die Leerzeichen manuell und verwenden Sie das anstelle von SASS. –