Supporto per "border-radius" in IE

158

Qualcuno sa se / quando Internet Explorer supporterà l'attributo CSS "border-radius"?

internet-explorer css

— Tony il Pony
fonte

220

Sì! Quando IE9 è stato rilasciato nel gennaio 2011.

Diciamo che vuoi un 15px pari su tutti e quattro i lati:

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

IE9 utilizzerà il valore predefinito border-radius, quindi assicurati di includerlo in tutti i tuoi stili chiamando un raggio di confine. Quindi il tuo sito sarà pronto per IE9.

-moz-border-radiusè per Firefox, -webkit-border-radiusè per Safari e Chrome.

Inoltre: non dimenticare di dichiarare che la tua codifica IE è ie9:

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

Alcuni sviluppatori pigri hanno <meta http-equiv="X-UA-Compatible" content="IE=7" />. Se quel tag esiste, border-radius non funzionerà mai in IE.

— Kevin Florida
fonte

7

Presumibilmente se non si utilizza il meta tag compatibile con X-UA non è necessario aggiungerlo solo per farlo funzionare in IE9?

— thepeer,

72

Dovresti mettere le versioni del prefisso del fornitore PRIMA e quella ULTIMA in modo che se il browser supporta lo standard attuale, utilizzerà quella invece della versione con prefisso del fornitore.

— Jason Berry,

4

Corretto, non è necessario il meta tag .. è sufficiente sostituire l'emulatore ie7 se è incluso. Altrimenti, non preoccuparti.

— Kevin Florida,

3

FYI nell'attuale beta di IE9 'border-radius' funziona correttamente usando un singolo valore. Tutti e quattro i valori non sono richiesti a meno che non si desideri effettivamente che siano diversi.

— mikemaccana,

2

@nailer: Grazie per l'aggiornamento degli angoli. Il primo alpha vs e beta vs di IE9 ha richiesto tutti e 4 gli angoli dichiarati. Ho appena scaricato l'ultimo ie9 RC e mi sta permettendo di dichiarare un valore .. Non sono sicuro di quando sia cambiato ..

— Kevin Florida,

46

La risposta a questa domanda è cambiata da quando è stata posta un anno fa. (Questa domanda è attualmente uno dei migliori risultati di Google "border-radius ie".)

IE9 supporterà border-radius.

È disponibile un'anteprima della piattaforma che supporta border-radius . Avrai bisogno di Windows Vista o Windows 7 per eseguire l'anteprima (e IE9 quando viene rilasciato).

— David Johnstone
fonte

27

Mentre stai aspettando ... Angolo curvo (bordo-raggio) cross browser

— Luis Melgratti
fonte

18

Una soluzione alternativa e uno strumento utile:

CSS3Pie utilizza i file .htc e la proprietà behavior per implementare CSS3 in IE 6 - 8.

Modernizr è un po 'di javascript che inserirà le classi nel tuo elemento html, permettendoti di offrire diverse definizioni di stile a diversi browser in base alle loro capacità.

Ovviamente, entrambi aggiungono più sovraccarico, ma con IE9 a causa della sola esecuzione su Vista / 7 potremmo rimanere bloccati per un bel po '. Ad agosto 2010 Windows XP rappresenta ancora il 48% dei sistemi operativi client Web.

— Peter G
fonte

2

CSS3 PIE era di gran lunga l'opzione più semplice e meno invadente per questo.

— Chris Rasco,

12

Non è previsto per IE8. Vedi la pagina Compatibilità CSS .

Oltre a ciò non sono stati rilasciati piani. Esistono voci secondo cui IE8 sarà l'ultima versione per Windows XP

— Ben S
fonte

12

Sicuramente ti sbagli, perché anche IE9 supporterà CSS3 e non vedo IE morire da nessuna parte. Qualcuno uccide IE

— Starx l'

10

Si scopre che IE8 è l'ultima versione ... per Windows XP.

— M. Dudley,

7

<!DOCTYPE html> senza questo tag border-radius non funziona in IE9, senza bisogno di meta tag.

— JAVAC
fonte

6

Aggiornamento rapido a questa domanda, IE9 supporterà border-radius secondo: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

— simonrjones
fonte

4

Usa -ms-border-radius: 15px, qualsiasi elemento che utilizza css -ms- è compatibile con IE.

— Iago Bruno
fonte

2

Il problema del raggio d'angolo di IE risolverà.

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

— Jaya
fonte

2

Che dire del supporto per raggio del bordo e gradiente di sfondo. Sì, IE9 è di supportarli entrambi separatamente, ma se mescoli i due il gradiente sanguina fuori dall'angolo arrotondato. Di seguito è riportato un link a un cattivo esempio, ma l'ho visto anche nei miei test. Dovrebbe aver preso una schermata :(

Forse la vera domanda è quando IE supporterà gli standard CSS senza hack proprietari di MS-FILTER.

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

— SigmaBetaTooth
fonte

IE10 supporterà i gradienti CSS3 corretti (l'attuale anteprima dello sviluppatore IE10 fa già via -ms-linear-gradient). Se vuoi gradienti che rispettino il bordo-raggio in IE9, devi usare SVG (o un file SVG esterno o uno che è codificato in un URI di dati) - vedi css3wizardry.com/2010/10/29/css-gradients-for- ie9 - anche CSS3 PIE lo automatizzerà presto, è disponibile una build di test

— lojjic

Una soluzione rapida è avvolgerlo in un altro elemento. Assegna all'elemento padre lo stesso raggio del bordo e imposta il suo overflow su nascosto.

— Senne

1

RISOLTO - il rendering del raggio del bordo non corretto in IE 10 e 11

Per coloro che non ottengono il -ms-border-radius: o il border-radius: lavorare in IE 10,11 E rende tutto quadrato quindi segui questi passaggi:

Fai clic sulla ruota dentata in alto a destra nel browser IE
Fai clic su Impostazioni vista Compatibilità
Ora deseleziona le 2 caselle selezionate per impostazione predefinita.

Assicurarsi che le caselle siano deselezionate come in figura

— Allan Starr
fonte