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

Respostas:

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
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
4

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

Iago Bruno
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

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

Verifique se as caixas estão desmarcadas como na foto

Allan Starr
fonte