IE9 ist anscheinend in der Lage, abgerundete Ecken mithilfe der CSS3-Standarddefinition von zu verarbeiten border-radius
.
Was ist mit der Unterstützung des Randradius und des Hintergrundgradienten? Ja, IE9 soll beide separat unterstützen, aber wenn Sie die beiden mischen, blutet der Farbverlauf aus der abgerundeten Ecke.
Ich sehe auch Fremdheit mit Schatten, die als durchgezogene schwarze Linie unter einem Kasten mit abgerundeten Ecken angezeigt werden.
Hier sind die in IE9 gezeigten Bilder:
Wie kann ich dieses Problem umgehen?
internet-explorer-9
gradient
compass-sass
css
SigmaBetaTooth
quelle
quelle
Antworten:
Hier ist eine Lösung, die einen Hintergrundverlauf hinzufügt und mithilfe eines Daten-URI ein halbtransparentes Bild erstellt, das jede Hintergrundfarbe überlagert. Ich habe überprüft, ob es in IE9 korrekt auf den Randradius zugeschnitten ist. Dies ist leichter als SVG-basierte Vorschläge, aber als Nachteil nicht auflösungsunabhängig. Ein weiterer Vorteil: Funktioniert mit Ihrem aktuellen HTML / CSS und erfordert kein Umschließen mit zusätzlichen Elementen.
Ich habe über eine Websuche ein zufälliges 20x20-Gradienten-PNG abgerufen und es mit einem Online-Tool in einen Daten-URI konvertiert. Der resultierende Daten-URI ist kleiner als der CSS-Code für all das SVG-Durcheinander, geschweige denn das SVG selbst! (Sie können dies bedingt auf IE9 anwenden, indem Sie nur bedingte Stile, browserspezifische CSS-Klassen usw. verwenden.) Das Generieren eines PNG eignet sich natürlich hervorragend für Verläufe in Schaltflächengröße, jedoch nicht für Verläufe in Seitengröße!
HTML:
CSS:
quelle
background-size: 100% 103%; background-position:center;
besser ist. 100% für beide Werte fügt oben und unten einen seltsamen Rand hinzu.Ich habe auch mit diesem Problem gearbeitet. Eine andere "Lösung" besteht darin, ein Div um das Element hinzuzufügen, das den Farbverlauf und abgerundete Ecken aufweist. Stellen Sie sicher, dass das Div die gleichen Werte für Höhe, Breite und abgerundete Ecken aufweist. Stellen Sie den Überlauf auf versteckt. Dies ist im Grunde nur eine Maske, aber es funktioniert für mich.
HTML:
CSS:
quelle
Ich denke, es ist erwähnenswert, dass Sie in vielen Fällen einen eingefügten Kastenschatten verwenden können, um den Verlaufseffekt zu "fälschen" und die hässlichen Kanten in IE9 zu vermeiden. Dies funktioniert besonders gut mit Tasten.
Siehe dieses Beispiel: http://jsfiddle.net/jancbeck/CJPPW/31/
quelle
box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
Sie können dieses Problem auch mit CSS3 PIE beheben:
http://css3pie.com/
Das kann natürlich übertrieben sein, wenn Sie nur von einem einzelnen Element mit abgerundeten Ecken und einem Hintergrundverlauf abhängig sind. Es ist jedoch eine Option, die Sie in Betracht ziehen sollten, wenn Sie eine Reihe gängiger CSS3-Funktionen in Ihre Seiten integrieren und eine einfache Unterstützung wünschen für IE6 +
quelle
Ich bin auch auf diesen Fehler gestoßen. Mein Vorschlag wäre, ein wiederholtes Hintergrundbild für den Gradienten in ie9 zu verwenden. IE9 kachelt das Bild korrekt hinter den abgerundeten Rändern (ab RC1).
Ich verstehe nicht, wie einfach oder elegant das Schreiben von 100 Codezeilen ist, um 1 Zeile CSS zu ersetzen. SVG ist cool und alles, aber warum sollte man das alles durchgehen, wenn es seit Jahren einfachere Lösungen für Gradientenhintergründe gibt?
quelle
Ich steckte auch in dem gleichen Problem fest und stellte fest, dass der IE den Randradius und den Farbverlauf nicht gleichzeitig rendern kann. Beide Konflikte. Die einzige Möglichkeit, diese Kopfschmerzen zu lösen, besteht darin, den Filter zu entfernen und den Farbverlauf über SVG-Code zu verwenden. nur für IE ..
Sie können den SVG-Code mithilfe des Farbverlaufs-Farbcodes von Microsoft auf dieser Website abrufen (speziell für Farbverläufe zu SVG erstellt):
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
genießen :)
quelle
Verwenden Sie einfach ein Wrapper-Div (gerundet und Überlauf ausgeblendet), um den Radius für IE9 zu beschneiden. Einfach, funktioniert browserübergreifend. SVG-, JS- und bedingte Kommentare sind nicht erforderlich.
quelle
Dieser Blogeintrag hat mir geholfen: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
Grundsätzlich verwenden Sie einen bedingten Kommentar, um den Filter zu entfernen und anschließend SVG-Sprites mit Verläufen zu erstellen, die Sie als Hintergrundbilder verwenden können.
Einfach und elegant!
quelle
url()
. Nur noch ein Hold-Out übrig, also lassen Sie die 1000 Bedingungen fallen und servieren Sie SVG für das BG auf allen, die es unterstützen. Servieren Sie für alle anderen ein gerastertes Bild. Dann wird dieser Hack überschaubar.IE9 behandelt Randradius und Farbverläufe ordnungsgemäß. Das Problem ist, dass IE9 den Filter zusätzlich zum Gradienten richtig rendert . Um dies richtig zu lösen, müssen Sie Filter für die Stildeklarationen deaktivieren, die die Filtereigenschaft verwenden.
Als Beispiel, wie dies am besten gelöst werden kann:
Sie haben eine Schaltflächenklasse in Ihrem Haupt-Stylesheet.
In einem bedingten IE9-Stylesheet:
Solange das IE9-Stylesheet in Ihrem Kopf nach Ihrem Haupt-Stylesheet referenziert wird, funktioniert dies einwandfrei.
quelle
Es gibt eine einfache Möglichkeit, es unter IE9 mit nur EINEM Element zum Laufen zu bringen.
Schauen Sie sich diese Geige an: http://jsfiddle.net/bhaBJ/6/
Das erste Element legt den Randradius fest. Das zweite Pseudoelement legt den Hintergrundgradienten fest.
Einige wichtige Anweisungen:
Die Basiselementdeklaration lautet wie folgt:
Pseudoelementdeklaration:
quelle
Ich habe beschlossen, IE9 daran zu hindern, Ecken abzurunden, um diesen Fehler zu umgehen. Es ist sauber, einfach und allgemein verwendbar.
quelle
Das Maskendiv in IE9 ist eine gute Idee. Ich liefere einen vollständigen Code, um ein wenig zu klären. Ich bin zwar nicht zufrieden damit, die Schaltfläche in ein DIV zu packen, aber ich denke, es ist einfacher zu verstehen, als eine PNG-Maske einzubetten oder alle Anstrengungen mit SVG zu unternehmen. Vielleicht wird IE 10 es richtig unterstützen.
quelle
Hat mir das angetan und als ich die "Filter:" - Linie entfernt habe, ist die Blutung verschwunden. Außerdem benutze ich PIE.
Blutungen:
Blutet nicht:
Schnelle IE-Schattenkorrektur:
}}
quelle
Sie können Schatten verwenden , um einen Farbverlauf zu erzielen, und arbeiten mit Internet Explorer 9 mit
border-radius
Etwas wie das:
quelle
Ich bin mir nicht sicher, ob dies eine einmalige oder eine gültige Problemumgehung war, aber ...
Ich habe festgestellt, dass das Problem nicht aufgetreten ist, vorausgesetzt, der Randradius ist größer als die Randbreite. Als sie gleich waren, bekam ich die quadratischen Ecken.
quelle
Mit Kompass und Sass können Sie dies auf einfache Weise erreichen:
Compass generiert ein SVG-Bild für Sie.
wie so:
}}
}}
quelle
Funktioniert bei mir...
CSS
quelle