IE9 Randradius und Hintergrundgradientenblutung

191

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:

Bild ohne Ausbluten, aber scharfe Ecken Bild mit Blutung

Wie kann ich dieses Problem umgehen?

SigmaBetaTooth
quelle
Danke für die Tipps @MikeP und @meanstreakuk. Ich denke, die Antwort, nach der ich suche, ist eher so, wie IE wirklich Farbverläufe / Rundungen unterstützt oder wie ich die beiden dazu bringe, zusammenzuarbeiten.
SigmaBetaTooth
Sie haben die Antwort von @meanstreak, wie Sie die 2 zusammenbringen können. Wenn Sie realistisch sein möchten, werden SVG-Verläufe als Hintergrundbilder viel eher von allen Browsern unterstützt als CSS-Verläufe (die sich noch in einer intensiven Entwicklung / Diskussion befinden).
Kevin Peno
29
Unglaubliche MS ist so weit zurück. Es ist 2011 und IE beschäftigt sich immer noch mit solchen Problemen. zzzzzzz. ..auf ihrer Seite sagen sie: "schnell ist jetzt schön". Sicher ist es das. Schauen Sie sich die Bilder oben an. Was für eine rechteckige Schönheit!
SunnyRed
SunnyRed, na ja, in Chrome-Elemente, die in etwas mit abgerundeten Ecken enthalten sind, bluten über die Ecken. Wirklich, es ist 2012 und Browser beschäftigen sich immer noch mit solchen Problemen :-)
Joey
2
@ SunnyRed Es 2013 jetzt und der Fehler ist immer noch da :(
Sliq

Antworten:

49

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:

<span class="button">This is a button</span>

CSS:

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}
Steve Eisner
quelle
1
Und der Gewinner ist ... Ich denke, wenn ich einen auswählen muss, dann ist es das. Ich hatte gehofft, mehr Informationen darüber zu erhalten, wann der IE tatsächlich das unterstützen würde, was er unterstützt. Was die Hintergrundbildlösung betrifft, bin ich teilweise daran interessiert, keine Bilder einzuziehen, damit sich der IE verhält. Vielen Dank an alle für ihre hilfreichen Vorschläge.
SigmaBetaTooth
1
Ich fand, dass die Einstellung background-size: 100% 103%; background-position:center;besser ist. 100% für beide Werte fügt oben und unten einen seltsamen Rand hinzu.
Morten Christiansen
Hintergrundgröße hinzufügen: 100% 103%; Hintergrundposition: Mitte; tut nichts für mich
Gregory Bolkenstijn
2
Sie sind sich nicht ganz sicher, warum Sie die Daten-Uri verwenden und nicht nur ein Bild? Ich denke, ein Bild würde für ie9-Benutzer einen zusätzlichen Anruf beim Server bedeuten, aber all diese zusätzlichen Zeichen an Browser zu senden, die nicht ie9 sind, scheint verschwenderisch. Lösung funktioniert für mich als Bild, würde die Erklärung lieben.
Lockvogel
4
Sein manueller Daten-URI ist das, was einige CSS-Präprozessoren normalerweise während der Bereitstellungszeit tun. Ab "aber was für ein hässlicher Hack ist das" ist das ein Kardinal-Bullshit. SVG ist ein Bild wie jedes andere, obwohl es ein Vektor ist. SVG als Hack zu bezeichnen und stattdessen ein PNG vorzuschlagen, ist absolut unsinnig. Warum ist SVG besser? Unabhängigkeit von der Auflösung, aus demselben Grund, aus dem Sie den Rahmenradius anstelle des gerasterten Bildhintergrunds verwenden.
Skrat
104

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:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}
user740128
quelle
3
Dies funktioniert perfekt für mich und ist viel einfacher als die anderen vorgeschlagenen Lösungen.
Simon P Stevens
Viel einfacher als die aktuell akzeptierte Antwort. Dies funktioniert in IE9 für mich.
Andy McCluggage
Das funktioniert ... so traurig und erbärmlich. Dies ist der 'HTML5'-Browser!? Warum freue ich mich nicht über IE10?
Todd Vance
@toddv Mach dir keine Sorgen. Es wird alles bald vorbei sein. Nicht früh genug, aber bald. Siehe daringfireball.net/linked/2012/07/04/windows-hegemony Mit etwas Glück muss sich niemand mehr um die Unterstützung von IE12 sorgen ... vielleicht IE14 - es wird unscharf.
Jinglesthula
2
Nur eine kleine Anmerkung, aber Ihre Randradiusangaben sollten umgekehrt werden, um die Vorwärtskompatibilität zu fördern. Ich habe die Bearbeitung vorgenommen.
Parris
44

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/

Vergleich eines Schaltflächenstils mit linearem Farbverlauf oder Kastenschatten

Jan Beck
quelle
2
Hervorragende Lösung in meinem Fall, da ich diese nur auf einem Knopf verwendet habe und einen Farbverlauf brauchte, genau wie Sie gezeichnet haben. Ich habe vorerst bedingte Kommentare für gte IE9 verwendet und 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);
mich
elegant und einfach. i ++.
Eliran Malka
1
+1 für ein Denken über den Tellerrand hinaus. Funktioniert hervorragend für Registerkarten und Schaltflächen. Durch Verwendung des Einschubs bleibt der Farbverlauf im Element.
GlennG
Dies ist die beste Lösung, die ich gesehen habe. Reines CSS, erfordert keine zusätzlichen Elemente oder Bilder.
Zaqx
1
schöner Trick, aber ich habe Farbverläufe auf der ganzen Website. Ich kann nicht alle für dumm ändern, dh.
Mehmet Fatih Yıldız
8

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 +

Louis L.
quelle
1
selbst mit css3pie und ie9 sehe ich den gradienten nicht. Ich sehe die abgerundeten Ecken und den Schlagschatten, aber kein Gefälle.
Kevin
7

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?

MikeP
quelle
5

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 :)

Himanshu Jani
quelle
Link ist nicht mehr gültig.
Crush
5

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.

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}
Brian Lewis
quelle
4

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!

Dan Herd
quelle
Ich lebe das. Besonders groß, um mir zu helfen, meine Suche nach dem Erstellen von Sprites mit SVG ENDLICH zu beenden. Da SVG skalierbar ist und Sprites möglich sind, finde ich SVG-Sprite-Packs weitaus vielseitiger als CSS-Verläufe und werde, wie oben erwähnt, wahrscheinlich lange vor CSS-Verläufen 100% ige Unterstützung in Browsern finden.
Kevin Peno
Oh, das einzige, was ich hinzufügen möchte, ist das derzeitige Webkit und, glaube ich, die Oper unterstützt SVG auch bei CSS-Bildaufrufen 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.
Kevin Peno
4

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.

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

In einem bedingten IE9-Stylesheet:

.btn { filter: none; }

Solange das IE9-Stylesheet in Ihrem Kopf nach Ihrem Haupt-Stylesheet referenziert wird, funktioniert dies einwandfrei.

WFendler
quelle
2
ie9 rendert keine linearen Verläufe
James Westgate
3

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:

  • Eltern müssen relative oder absolute Position haben
  • Eltern müssen überlaufen: versteckt ; (damit der Randradius-Effekt sichtbar wird)
  • :: vor (oder :: nach) Pseudoelement muss z-Index haben: -1 (Art der Problemumgehung)

Die Basiselementdeklaration lautet wie folgt:

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

Pseudoelementdeklaration:

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}
Marakoss
quelle
Einfach perfekt! Vielen Dank! :)
Majimekun
Ich habe den Randradius in Ihrem Beispiel auf 20 gesetzt, und die Ränder werden in IE9 nicht abgeschnitten
Crush
Versuchen Sie dies in Ihrem Header zu setzen: <meta http-equiv = "X-UA-kompatibel" content = "IE = 9" />
Marakoss
2

Ich habe beschlossen, IE9 daran zu hindern, Ecken abzurunden, um diesen Fehler zu umgehen. Es ist sauber, einfach und allgemein verwendbar.

{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}
Schlüssel_
quelle
1

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.

<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
 background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
 float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
 padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
 text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
 border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
 -moz-box-shadow:0px 0px 0px rgb(0,0,0);
 -webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
 background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
 background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>
Außenseiter
quelle
1
background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */

Hat mir das angetan und als ich die "Filter:" - Linie entfernt habe, ist die Blutung verschwunden. Außerdem benutze ich PIE.

Blutungen:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Blutet nicht:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Schnelle IE-Schattenkorrektur:

fixBoxShadowBlur($('*'));

function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
    jQueryObject.each(function(){
        boxShadow = $(this).css('boxShadow');
        if(boxShadow != 'none'){
            var bsArr = boxShadow.split(' ');
            bsBlur = parseInt(bsArr[2]) || 0;
            bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
            bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
            $(this).css('boxShadow', bsArr.join(' '));
        }
    });
}

}}

Shawn Rebelo
quelle
1

Sie können Schatten verwenden , um einen Farbverlauf zu erzielen, und arbeiten mit Internet Explorer 9 mitborder-radius

Etwas wie das:

box-shadow: inset 0px 0px 26px 5px gainsboro;
Rajesh
quelle
0

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.

Daddywoodland
quelle
0

Mit Kompass und Sass können Sie dies auf einfache Weise erreichen:

@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }

Compass generiert ein SVG-Bild für Sie.

wie so:

#gradiant {
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e),   color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);

}}

/* line 28, ../sass/boxshadow.scss */
#border-radius {
 -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
   border-top-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  border-bottom-right-radius: 8px;

}}

raam86
quelle
0

Funktioniert bei mir...

<!--[if gte IE 9]>
  <style type="text/css">
  .gradient{
   filter: ;
}
</style>

CSS

border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color-    stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+     */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db',     endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);

quelle