Es scheint, dass IE sich nicht um text-decoration: none; kümmert, die für a:before pseudo-Element (oder Pseudo-Klasse) definiert ist.
Hier ist eine JS Fiddle: Ссылка Ich würde das "& gt;" die Unterstreichung verlieren. Es ist in FF, Chrome und Safari, aber nicht in IE. Getestet mit IE10 und IE9.
Irgendwelche Problemumgehungen, die ich versuchen könnte, das :before -Element die Unterstreichung zu verlieren? Ideal in IE9 +
Gibt es dafür irgendwo einen Fehlerbericht? Oder ist es tatsächlich nach den Standards?
IE scheint hier fehlerhaft zu sein, da display: block in Ihrem Code die Unterstreichung entfernen sollte. Gemäß Klausel 16.3 Dekoration in der CSS 2.1-Spezifikation müssen die Benutzeragenten nicht Rendern Sie diese Textdekorationen für Inhalte, die kein Text sind. Beispielsweise dürfen Bilder und Inline-Blöcke nicht unterstrichen sein. "
Es scheint keinen Fehler zu geben, einen Bericht darüber im IE Feedback Home .
In diesem Fall könnte eine geeignete Abhilfe darin bestehen, ein Bild als generierten Inhalt zu verwenden:
%Vor% Dabei bezieht sich arrow.png auf ein passendes kleines Symbol. Die Verwendung von url(...) in content wird im CSS3-Modul für generierte und ersetzte Inhalte beschrieben ernsthaft veralteter Entwurf (die letzte Version ist von 2003), aber dieser Teil wurde in Browsern weit verbreitet. Nicht in IE 7, jedoch. Wenn Sie also auch den IE 7 abdecken möchten, sollten Sie den Ansatz in @ EugeneXAs Antwort in Erwägung ziehen und möglicherweise das zusätzliche Markup dynamisch mit JavaScript generieren.
Ich bin mir bewusst, dass dies ein ziemlich älterer Thread ist, aber nachdem ich gerade in IE 11 gegen dieses Problem gestanden habe und nicht in der Lage war, viel Hilfe zu finden, entschied ich mich zu experimentieren. Mit Hilfe von deutlich verbesserten Dev-Tools als in den früheren Versionen konnte ich es herausfinden - für das, woran ich gerade arbeite. Es besteht die Möglichkeit, dass es auch für andere funktioniert, auch wenn Sie möglicherweise Anpassungen vornehmen müssen. YMMV.
Das HTML:
%Vor%Das CSS (bearbeitet nach @frnhr wies darauf hin, dass die ursprüngliche Version, die ich gepostet habe, nicht wirklich funktionierte):
%Vor% Die geheime Soße setzt die Höhe und die overflow: hidden; -Zeile; Es bedeutet, dass die Unterstreichung immer noch dort ist, aber außerhalb des Darstellungsbereichs, der von einem Pseudoelement bereitgestellt wird, und wird daher nie auf dem Bildschirm angezeigt. Es funktioniert auch mit anderen Browsern (getestet auch in Chrome und Firefox). Abhängig von Ihrem vorhandenen Styling werden Sie wahrscheinlich den Pixelwert im Wert calc() optimieren wollen.
Siehe Ссылка
Nicht sicher, was Standards sagen, aber IE-Verhalten scheint logischer zu sein. Stellen Sie sich Folgendes vor: als ein Element innerhalb von <a> tag, nicht außerhalb davon. Die Text-Deko-Eigenschaft des Kindes sollte nichts mit seinen Eltern zu tun haben.
Diese Problemumgehung funktioniert
%Vor% Eine andere Lösung besteht darin, eine kleine line-height ( height funktioniert auch) und overflow: hidden zu setzen, damit die Unterstreichung verschwindet.
Ich weiß, dass dies nicht die beste Lösung ist, da der Wert für die Zeilenhöhe von dem verwendeten Zeichen abhängt. In diesem Fall ist 0.6 ein guter Wert, aber vielleicht nicht für ein anderes Zeichen.
In meinem Fall war es eine gute Lösung, weil ich das Problem mit nur einem bestimmten Zeichen mit einer festen Schriftgröße hatte.
%Vor%Tags und Links internet-explorer css pseudo-class pseudo-element