Suporte para "raio de borda" no IE

158

Alguém sabe se / quando o Internet Explorer suportará o atributo CSS "border-radius"?

internet-explorer css

— Tony, o Pônei
fonte

220

Sim! Quando o IE9 é lançado em janeiro de 2011.

Digamos que você queira 15 pixels iguais nos quatro lados:

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

O IE9 usará o padrão border-radius, portanto, inclua isso em todos os seus estilos chamando um raio de borda. Em seguida, seu site estará pronto para o IE9.

-moz-border-radiusé para Firefox, -webkit-border-radiusé para Safari e Chrome.

Além disso: não se esqueça de declarar que sua codificação do IE é ie9:

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

Alguns desenvolvedores preguiçosos têm <meta http-equiv="X-UA-Compatible" content="IE=7" />. Se essa tag existir, o raio da borda nunca funcionará no IE.

— Kevin Florida
fonte

7

Presumivelmente, se você não estiver usando a metatag compatível com X-UA, não precisará adicioná-la apenas para fazê-la funcionar no IE9.

— thepeer 30/09/10

72

Você deve colocar as versões do prefixo do fornecedor PRIMEIRO e o ÚLTIMO padrão, para que, se o navegador suportar o padrão real, ele será usado em vez da versão prefixada do fornecedor.

— Jason Berry

4

Correto, você não precisa da meta tag .. você só precisa substituir o emulador ie7 se ele estiver incluído. Caso contrário, não se preocupe.

— Kevin Florida

3

O FYI no atual IE9 beta 'border-radius' funciona corretamente usando um único valor. Todos os quatro valores não são necessários, a menos que você realmente queira que eles sejam diferentes.

— Mikemaccana

2

@nailer: Obrigado por atualizar os cantos. O primeiro alpha vs e beta vs do IE9 exigiram todos os quatro cantos declarados. Eu apenas o download do mais recente IE9 RC e está deixando-me declarar um valor .. Não tenho certeza quando isso mudou ..

— Kevin Florida

46

A resposta a esta pergunta mudou desde que foi feita há um ano. No momento, esta pergunta é um dos principais resultados do Google "raio de borda, por exemplo".)

O IE9 suportará border-radius.

Há uma prévia da plataforma disponível que suporta border-radius . Você precisará do Windows Vista ou Windows 7 para executar a visualização (e o IE9 quando for lançado).

— David Johnstone
fonte

27

Enquanto espera .. Canto curvo (raio da borda) cruza o navegador

— Luis Melgratti
fonte

18

Uma solução alternativa e uma ferramenta útil:

CSS3Pie usa arquivos .htc e a propriedade behavior para implementar CSS3 no IE 6 - 8.

Modernizr é um pouco de javascript que colocará classes em seu elemento html, permitindo que você atenda diferentes definições de estilo a diferentes navegadores com base em seus recursos.

Obviamente, ambos aumentam a sobrecarga, mas com o IE9, devido à execução apenas no Vista / 7, podemos ficar presos por um bom tempo. Em agosto de 2010, o Windows XP ainda era responsável por 48% dos sistemas operacionais de clientes da web.

— Peter G
fonte

2

A TORTA CSS3 foi de longe a opção mais fácil e menos invasiva para isso.

— Chris Rasco

12

Não está planejado para o IE8. Veja a página de compatibilidade com CSS .

Além disso, nenhum plano foi divulgado. Existem rumores de que o IE8 será a última versão do Windows XP

— Ben S
fonte

12

Você está obviamente errado, porque o IE9 também suporta CSS3 e não vejo o IE morrendo em lugar algum. Pls alguém matar IE

— Starx

10

Acontece que o IE8 é a última versão ... para Windows XP.

— M. Dudley

7

<!DOCTYPE html> sem essa tag border-radius não funciona no IE9, não há necessidade de metatags.

— JAVAC
fonte

6

Atualização rápida para esta pergunta, o IE9 oferecerá suporte ao raio da borda de acordo com: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

— simonrjones
fonte

4

Use -ms-border-radius: 15px, qualquer elemento que use css -ms- é compatível com o IE.

— Iago Bruno
fonte

2

A questão do raio do canto do IE será resolvida.

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

— jaya
fonte

2

E o suporte ao raio da borda E ao gradiente de fundo. Sim, o IE9 é apoiá-los separadamente, mas se você misturar os dois, o gradiente sangra pelo canto arredondado. Abaixo está um link para um exemplo ruim, mas eu já vi isso nos meus próprios testes. Deveria ter tirado uma captura de tela :(

Talvez a verdadeira questão seja quando o IE suportará os padrões CSS sem os hacks proprietários do MS-FILTER.

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

— SigmaBetaTooth
fonte

O IE10 suportará gradientes CSS3 adequados (a visualização atual do desenvolvedor do IE10 já é via -ms-linear-gradient). Se você deseja gradientes que respeitem o raio da borda no IE9, precisará usar o SVG (um arquivo SVG externo ou um codificado em um URI de dados) - consulte css3wizardry.com/2010/10/29/css-gradients-for- IE9 - também CSS3 PIE em breve automatizar isso, há um acúmulo de testes disponíveis

— lojjic

Uma solução rápida é envolvê-lo em outro elemento. Dê ao elemento pai o mesmo raio da borda e defina seu estouro como oculto.

— quer

1

RESOLVIDO - não renderizando o raio da borda corretamente no IE 10 e 11

Para aqueles que não estão recebendo o -ms-border-radius: ou o border-radius: para trabalhar no IE 10,11

Clique na roda dentada no canto superior direito do navegador IE
Clique em Configurações de exibição de compatibilidade
Agora desmarque as 2 caixas marcadas por padrão.

Verifique se as caixas estão desmarcadas como na foto

— Allan Starr
fonte