Suport pentru „border-radius” în IE (Programare, Internet Explorer, Css)

Tony Pony a intrebat.

Știe cineva dacă/când Internet Explorer va suporta atributul CSS „border-radius”?

11 răspunsuri
Kevin Florida

Da! Când IE9 va fi lansat în ianuarie 2011.

Să zicem că vrei un 15px uniform pe toate cele patru laturi:

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

IE9 va folosi valoarea implicită border-radius, , așa că asigurați-vă că includeți acest lucru în toate stilurile dvs. care solicită o rază de frontieră. Apoi, site-ul dvs. va fi pregătit pentru IE9.

-moz-border-radius este pentru Firefox, -webkit-border-radius este pentru Safari și Chrome.

În plus: nu uitați să declarați că codificarea IE este ie9:

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

Unii dezvoltatori leneși au <meta http-equiv="X-UA-Compatible" content="IE=7" />. Dacă există acest tag, border-radius nu va funcționa niciodată în IE.

Comentarii

  • Probabil că, dacă nu folosiți meta tag-ul X-UA-Compatible, nu trebuie să-l adăugați doar pentru a face să funcționeze în IE9? –  > Por thepeer.
  • 72

  • Ar trebui să puneți versiunile cu prefixul furnizorului ÎN PRIMUL rând și standardul ÎN ULTIMUL rând, astfel încât, dacă browserul acceptă standardul real, atunci îl va folosi în locul versiunii cu prefixul furnizorului. –  > Por Jason Berry.
  • Corect, nu aveți nevoie de meta tag-ul… trebuie doar să înlocuiți emulatorul ie7 dacă este inclus. În caz contrar, nu vă faceți griji. –  > Por Kevin Florida.
  • Pentru informarea dvs. în versiunea beta actuală a IE9 „border-radius” funcționează corect folosind o singură valoare. Toate cele patru valori nu sunt necesare decât dacă nu doriți de fapt ca ele să fie diferite. –  > Por mikemaccana.
  • @nailer: Vă mulțumim pentru actualizarea colțurilor… Prima versiune alpha vs și beta vs a IE9 a necesitat toate cele 4 colțuri declarate. Tocmai am descărcat cea mai recentă RC IE9 și îmi permite să declar o singură valoare… Nu sunt sigur când s-a schimbat…  > Por Kevin Florida.
David Johnstone

Răspunsul la această întrebare s-a schimbat de când a fost pusă în urmă cu un an. (Această întrebare este în prezent unul dintre primele rezultate pentru căutarea pe Google „border-radius ie”).

IE9 va suporta border-radius.

Există o previzualizare a platformei disponibilă care suportă border-radius. Veți avea nevoie de Windows Vista sau Windows 7 pentru a rula previzualizarea (și IE9 când va fi lansat).

Luis Melgratti

În timp ce așteptați.. Colț curbat (border-radius) cross browser

Peter G

O soluție de rezolvare și un instrument la îndemână:

CSS3Pie folosește fișiere .htc și proprietatea behavior pentru a implementa CSS3 în IE 6 – 8.

Modernizr este o bucată de javascript care va pune clase pe elementul html, permițându-vă să serviți diferite definiții de stil pentru diferite browsere în funcție de capacitățile acestora.

În mod evident, ambele adaugă mai multe costuri suplimentare, dar, având în vedere că IE9 va funcționa doar pe Vista/7, s-ar putea să rămânem blocați pentru o perioadă de timp. În august 2010, Windows XP reprezenta încă 48% din sistemele de operare ale clienților web.

Comentarii

  • CSS3 PIE a fost de departe cea mai simplă și mai puțin intruzivă opțiune pentru acest lucru. –  > Por Chris Rasco.
Ben S

Nu este planificat pentru IE8. A se vedea Pagina de compatibilitate CSS.

În afară de aceasta, nu au fost publicate planuri. Există zvonuri conform cărora IE8 va fi ultimul versiune pentru Windows XP

Comentarii

  • Evident, vă înșelați, deoarece IE9 ar trebui să suporte și CSS3, iar eu nu văd IE murind nicăieri. Cineva să omoare IE –  > Por Starx.
  • Se pare că IE8 este ultima versiune… pentru Windows XP. –  > Por M. Dudley.
JAVAC

<!DOCTYPE html> fără această etichetă border-radius nu funcționează în IE9, nu e nevoie de meta tag-uri.

simonrjones

Actualizare rapidă la această întrebare, IE9 va suporta border-radius conform: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

Iago Bruno

Utilizați -ms-border-radius: 15px, , orice element care folosește css -ms- este compatibil cu IE.

jaya

Problema razei de colț a IE se va rezolva.

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

SigmaBetaTooth

Ce zici de suportul pentru rază de margine ȘI gradient de fundal. Da, IE9 este de a le susține pe amândouă separat, dar dacă amestecați cele două, gradientul iese din colțul rotunjit. Mai jos este un link către un exemplu slab, dar am văzut-o și eu în propriile mele teste. Ar fi trebuit să fac o captură de ecran 🙁

Poate că adevărata întrebare este când va suporta IE standardele CSS fără hack-uri de proprietate MS-FILTER.

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

Comentarii

  • IE10 va suporta gradienți CSS3 corespunzători (previzualizarea actuală a IE10 pentru dezvoltatori suportă deja acest lucru prin -ms-linear-gradient). Dacă doriți gradienți care să onoreze border-radius în IE9, trebuie să folosiți SVG (fie un fișier SVG extern, fie unul care este codificat într-un URI de date) – a se vedea css3wizardry.com/2010/10/29/css-gradients-for-ie9 — de asemenea, CSS3 PIE va automatiza în curând acest lucru, există o aplicație versiune de testare disponibilă –  > Por lojjic.
  • O soluție rapidă este să îl înfășurați într-un alt element. Dați elementului părinte același border-radius și setați-i overflow-ul la hidden. –  > Por Senne.
Allan Starr

REZOLVAT – nu redă corect border radius în IE 10 și 11

Pentru cei care nu reușesc ca -ms-border-radius: sau border-radius: să funcționeze în IE 10,11Și redă totul pătrat atunci urmați acești pași:

  1. Faceți clic pe roata dințată din dreapta sus a browserului IE
  2. Faceți clic pe Compatibility view settings
  3. Acum debifați cele 2 căsuțe care sunt bifate în mod implicit.