Eines der Projekte, an denen ich arbeite, verwendet den CSS-Attributselektor [att].
was von ie6 nicht unterstützt wird: Unterstützung für CSS-Selektoren in IE6 (suche nach Text "Attribut-Selektoren")
Gibt es einen Workaround / Hack, der natürlich html / css gültig ist, um dieses Problem zu lösen?
Antworten:
20 für die Antwort № 1Da IE6 im Wesentlichen beschränkt ist auf:
- Klassen-Selektoren
- ID-Selektoren
- (Leerzeichen) Nachkommen-Selektoren
- a: -nur Pseudo-Selektoren
Ihre einzigen Optionen sind:
- Verwenden Sie mehr Klassen, um Ihre Elemente zu identifizieren
- Verwenden Sie JavaScript (stark nicht empfohlen, außer in hoch spezialisierten Fällen)
Ich finde es sehr hilfreich, die Möglichkeit nutzen zu können, einem Element mehrere Klassen zuzuordnen, indem diese durch ein Leerzeichen getrennt werden: class="foo bar"
26 für die Antwort № 2
Dies ist leider nicht möglich, ohne dass Ihr HTML-Code mit einem Stapel fremder Klassenselektoren übergangen wird.
Ich empfehle Ihnen, Ihre Site so zu gestalten, dass IhreEin vollständig gültiges CSS funktioniert für Benutzer, die moderne Browser verwenden, und die im IE6 noch verwendet werden kann, wenn auch optisch nicht ganz richtig. Sie müssen nur das richtige Gleichgewicht finden, um Ihre Website auf den Standard zu bringen und den Benutzern, die gewonnen haben, den Rücken zu kehren "t Upgrade. Es ist ein defekter Browser, behandeln Sie ihn als solchen.
8 für die Antwort № 3
Wenn Sie einen Attributselektor in IE6 wünschen, können Sie Dean Edward IE.js. verwenden. http://dean.edwards.name/IE7/
Das bedeutet, dass sich IE 5+ mehr wie IE7 verhält
unterstützt die folgenden CSS-Selektoren: Elternteil> Kind benachbart + Geschwister benachbarte ~ Geschwister [attr], [attr = "value"], [attr ~ = "value"] etc .multiple.classes (behebt Fehler) : hover,: active,: focus (für alle Elemente) Erstkind: Letztes Kind, Nur-Kind, n-te Kind, n-letztes Kind : markiert,: deaktiviert,: aktiviert : leer,: enthält (),: nicht () : vor /: nach / inhalt: : lang ()
Ich hatte nicht IE6 (verwenden Sie IE7), also kann ich nicht sagen, dass es funktioniert, aber probieren Sie es aus
6 für die Antwort № 4
Sie können Internet Explorer-CSS-Ausdrücke in Kombination mit dem sicheren Unterstrich ("_", IE6 und früheren) verwenden:
/* Adds dotted bottom border to `<ABBR>` with a `title` attribute. */
abbr {
_border-bottom: expression(this.title ? "1px dotted" : "none");
}
abbr[title] {
border-bottom: 1px dotted;
}
Ich verstehe, dass Sie nach "gültigem" CSS gefragt haben, aber wenn der CSS-Hack über Ihnen freak ist, lesen Sie bitte Sichere CSS-Hacks.
Das obige könnte geändert werden in:
.ie6 abbr {
_border-bottom: expression(this.title ? "1px dotted" : "none");
}
abbr[title] {
border-bottom: 1px dotted;
}
Das ist, wenn Ihr HTML als begann:
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]> <html class="ie7"><![endif]-->
<!--[if IE 8]> <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
5 für die Antwort № 5
Dean Edwards " IE7-JavaScript-Bibliothek bietet Unterstützung für Attributselektoren für IE 5 und 6.
2 für die Antwort № 6
Verwenden Sie Klassen, das ist leider die einzige Lösung.
0 für die Antwort № 7
Wenn Sie jQuery auf Ihrer Site verwenden, ist eine andere Option SuperSelectors - Es geht durch die Stylesheets Ihrer Site, wobei dynamisch Klassen zu Elementen hinzugefügt werden, so dass sogar IE6 die Möglichkeit hat, CSS-Selektoren richtig zu unterstützen ul li:first-child li:nth-child(odd) a:hover.