Enquanto a maioria dos principais navegadores suportam o CSS ( Cascading Style Sheets) propriedade que irá processar elementos HTML com cantos curvos , Internet Explorer 8 e abaixo não compartilham esta característica . Isso deixou muitos desenvolvedores da Web em busca de um caminho separado para oferecer cantos curvos no Internet Explorer sem adicionar sobrecarga ao seu fluxo de trabalho. Felizmente, existem várias soluções de JavaScript disponíveis que simulam o comportamento de propriedade border-radius do CSS. Instruções
1
Empregar um plugin como jQuery Plugin de canto , se você for um desenvolvedor que já usa jQuery em seu site. Faça o download do plugin e colocar o arquivo (s) em seu servidor Web , então , ligar para eles dentro da tag head da sua página . Por exemplo , se os arquivos estão no mesmo diretório que a página :
;
Em seguida, chamar a função jQuery que vai arredondar os cantos no Internet Explorer, tanto dentro de uma tag script na cabeça da página ou em um arquivo JavaScript externo. Com jQuery Plugin de canto , o código pode ter esta aparência :
$ (" roundedBox . " ) Canto ( " bottom 20px ");
A primeira seção entre parênteses identifica o elemento de destino ( . s) , neste caso elementos com o nome de classe de " roundedBox ". A segunda seção entre parênteses é para opções. As opções incluem o tipo de canto , o canto ou cantos a ser afetado e o raio da curva.
2
Escolha uma solução independente , como os CurvyCorners JavaScript biblioteca . Faça o download e um link para a biblioteca dentro da tag head da sua página. Por exemplo :
Em seguida, defina os atributos CSS border-radius para os elementos que devem tem cantos arredondados :
roundedBox {
-webkit- border-radius : 20px ;
-moz- border-radius : 20px ; }
.
a primeira propriedade é para navegadores baseados no WebKit , incluindo o Safari e Chrome, enquanto o segundo é para navegadores baseados no Mozilla , como o Firefox . CurvyCorners analisa o CSS, detecta essas definições e as aplica no Internet Explorer.
3
Aproveite Componentes HTML, um mecanismo que a Microsoft desenvolveu para incorporar o comportamento dinâmico em suas páginas da web. Os componentes são simplesmente arquivos JavaScript com uma extensão HTC. Que afetam somente o Internet Explorer. Um arquivo htc livre . Que adiciona um comportamento para a propriedade CSS border-radius foi liberado. Baixe o arquivo e colocá-lo em um local acessível no espaço Web e, então, adicionar uma propriedade de " comportamento " que aponta para o arquivo HTC juntamente com o CSS que define a propriedade border-radius . . . Por exemplo :
roundedBox {
-moz- border-radius : 20px ;
-webkit- border-radius : 20px ;
border- radius: 20px ;
comportamento
: url ( border- radius.htc );
}