Unterstützung für "Randradius" im IE

158

Weiß jemand, ob / wann Internet Explorer das CSS-Attribut "Rahmenradius" unterstützt?

internet-explorer css

— Tony das Pony
quelle

220

Ja! Wenn IE9 im Januar 2011 veröffentlicht wird.

Angenommen, Sie möchten auf allen vier Seiten gerade 15 Pixel:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 verwendet die Standardeinstellung border-radius. Stellen Sie daher sicher, dass Sie dies in alle Ihre Stile aufnehmen, die einen Rahmenradius aufrufen. Dann ist Ihre Site für IE9 bereit.

-moz-border-radiusist für Firefox, -webkit-border-radiusist für Safari und Chrome.

Außerdem: Vergessen Sie nicht zu deklarieren, dass Ihre IE-Codierung ie9 ist:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Einige faule Entwickler haben <meta http-equiv="X-UA-Compatible" content="IE=7" />. Wenn dieses Tag vorhanden ist, funktioniert der Rahmenradius im IE niemals.

— Kevin Florida
quelle

7

Wenn Sie das X-UA-kompatible Meta-Tag nicht verwenden, müssen Sie es vermutlich nicht hinzufügen, damit es in IE9 funktioniert.

— Thepeer

72

Sie sollten die Herstellerpräfixversionen ZUERST und den Standard LETZT setzen, damit der Browser, wenn er den tatsächlichen Standard unterstützt, diese anstelle der Herstellerpräfixversion verwendet.

— Jason Berry

4

Richtig, Sie benötigen das Meta-Tag nicht. Sie müssen den ie7-Emulator nur ersetzen, wenn er enthalten ist. Ansonsten mach dir keine Sorgen.

— Kevin Florida

3

Zu Ihrer Information, in der aktuellen IE9-Beta-Version funktioniert 'Rahmenradius' ordnungsgemäß mit einem einzelnen Wert. Alle vier Werte sind nicht erforderlich, es sei denn, Sie möchten tatsächlich, dass sie unterschiedlich sind.

— Mikemaccana

2

@nailer: Danke, dass du die Ecken aktualisiert hast. Für das erste Alpha vs und Beta vs von IE9 mussten alle 4 Ecken deklariert werden. Ich habe gerade die neueste ie9 RC heruntergeladen und kann einen Wert deklarieren. Ich bin mir nicht sicher, wann sich das geändert hat.

— Kevin Florida

46

Die Antwort auf diese Frage hat sich geändert, seit sie vor einem Jahr gestellt wurde. (Diese Frage ist derzeit eines der Top-Ergebnisse für Googeln "Randradius dh".)

IE9 wird unterstützen border-radius.

Es ist eine Plattformvorschau verfügbar, die unterstützt border-radius . Sie benötigen Windows Vista oder Windows 7, um die Vorschau auszuführen (und IE9, wenn es veröffentlicht wird).

— David Johnstone
quelle

27

Während Sie warten .. Gebogene Ecke (Randradius) Cross-Browser

— Luis Melgratti
quelle

18

Eine Problemumgehung und ein praktisches Tool:

CSS3Pie verwendet .htc-Dateien und die Verhaltenseigenschaft, um CSS3 in IE 6 - 8 zu implementieren.

Modernizr ist eine Art Javascript, mit dem Klassen in Ihr HTML-Element eingefügt werden, sodass Sie verschiedenen Browsern je nach ihren Funktionen unterschiedliche Stildefinitionen bereitstellen können.

Natürlich erhöhen diese beiden den Overhead, aber mit IE9, das nur unter Vista / 7 ausgeführt wird, stecken wir möglicherweise eine ganze Weile fest. Bis August 2010 macht Windows XP immer noch 48% der Webclient-Betriebssysteme aus.

— Peter G.
quelle

2

CSS3 PIE war bei weitem die einfachste und am wenigsten aufdringliche Option dafür.

— Chris Rasco

12

Es ist nicht für IE8 geplant. Siehe die Seite CSS-Kompatibilität .

Darüber hinaus wurden keine Pläne veröffentlicht. Es gibt Gerüchte, dass IE8 die letzte Version für Windows XP sein wird

— Ben S.
quelle

12

Sie liegen offensichtlich falsch, da IE9 auch CSS3 unterstützen soll und ich nicht sehe, dass IE irgendwo stirbt. Jemand pls töten IE

— Starx

10

Es stellt sich heraus, dass IE8 die letzte Version ist ... für Windows XP.

— M. Dudley

7

<!DOCTYPE html> Ohne dieses Tag funktioniert der Rahmenradius in IE9 nicht, es werden keine Meta-Tags benötigt.

— JAVAC
quelle

6

Bei einer schnellen Aktualisierung dieser Frage unterstützt IE9 den Rahmenradius gemäß: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

— simonrjones
quelle

4

Verwenden Sie -ms-border-radius: 15px, jedes Element, das CSS -ms- verwendet, ist mit IE kompatibel.

— Iago Bruno
quelle

2

Das Problem mit dem Eckenradius des IE wird gelöst.

http://kbala.com/ie-9-supports-corner-radius/

— Jaya
quelle

2

Was ist mit der Unterstützung für Randradius UND Hintergrundverlauf? Ja, IE9 soll beide getrennt unterstützen, aber wenn Sie die beiden mischen, blutet der Farbverlauf aus der abgerundeten Ecke. Unten ist ein Link zu einem schlechten Beispiel, aber ich habe es auch in meinen eigenen Tests gesehen. Sollte ein Screenshot gemacht werden :(

Vielleicht ist die eigentliche Frage, wann der IE CSS-Standards ohne MS-FILTER-eigene Hacks unterstützen wird.

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

— SigmaBetaTooth
quelle

IE10 unterstützt korrekte CSS3-Verläufe (die aktuelle IE10-Entwicklervorschau erfolgt bereits über -ms-linear-gradient). Wenn Sie Farbverläufe wünschen, die den Rahmenradius in IE9 berücksichtigen, müssen Sie SVG verwenden (entweder eine externe SVG-Datei oder eine Datei, die in einem Daten-URI codiert ist) - siehe css3wizardry.com/2010/10/29/css-gradients-for- ie9 - auch CSS3 PIE wird dies bald automatisieren, es ist ein Test-Build verfügbar

— lojjic

Eine schnelle Lösung besteht darin, es in ein anderes Element zu wickeln. Geben Sie dem übergeordneten Element den gleichen Rahmenradius und setzen Sie den Überlauf auf ausgeblendet.

— Senne

1

Gelöst - Renderradius in IE 10 und 11 nicht korrekt gerendert

Für diejenigen, die nicht den -ms-Randradius: oder den Randradius: erhalten, um in IE 10,11 zu arbeiten. Und es werden alle Quadrate gerendert, dann gehen Sie folgendermaßen vor:

Klicken Sie oben rechts im IE-Browser auf das Zahnrad
Klicken Sie auf Einstellungen für die Kompatibilitätsansicht
Deaktivieren Sie nun die 2 Kontrollkästchen, die standardmäßig aktiviert sind.

Stellen Sie sicher, dass die Kontrollkästchen wie in Bild deaktiviert sind

— Allan Starr
quelle