Blog Dicas de Web Design

Box Sizing

Como habilitar Box Sizing no Internet Explorer 7 e abaixo

Box Sizing com a opção border- box, permite-nos manter a largura e altura de um elemento, independentemente do tamanho do preenchimento e espessura de borda.

Isso faz com que a medição e definição de tamanho de um elemento seja mais fácil. No entanto, CSS3 Box Sizing não funciona no Internet Explorer 7 ( IE7) e versões anteriores, como você pode ver abaixo.

box sizing internet explorer 7

Ambas as colunas que você vê na imagem acima tem largura, altura , preenchimento e box- sizing especificadas no CSS. Mas, como o IE7 não reconhece a propriedade box-sizing, a segunda coluna é empurrada para baixo, pois ela é entendida como maior que os espaço disponível naquela linha.

Você vai ter que ajustar o tamanho de cada coluna de acordo para fazê-las caber, o que pode ser uma tarefa muito chata dependendo do número de elementos que você precisa modificar. Se o seu site deve suportar o IE7 (por qualquer motivo) e ao mesmo tempo preservar CSS3 Box Sizing, você pode utilizar o seguinte truque.

Box Sizing Polyfill

Para fazer com que o IE7 (e abaixo) reconheça Box Sizing, podemos usar o pollyfill. Este polyfill vem na forma de um arquivo HTC e é desenvolvido por Christian Schaefer. Faça o download do arquivo a partir do Github e salve-o em, por exemplo, sua pasta CSS.

boxsizing.htc box sizing internet explorer 7

Crie uma folha de estilos CSS dedicada para Internet Explorer. Adicione o link no documento HTML da seguinte forma para que ele só seja carregado no IE7.

  1. <!--[if lte IE7]>  
  2.     <link rel="stylesheet" href="css/ie.css">  
  3. <![endif]--> 

Em seguida, coloque o seguinte código no ie.css . Esta regra CSS aplicará Box Sizing para todos os elementos.

  1. * {  
  2.     behavior: url(css/boxsizing.htc);  

Algumas coisas a serem observadas ao aplicar este truque:

O caminho do arquivo boxsizing.htc deve ser relativo à localização dos arquivos HTML , caso contrário, ele não funcionará.

O Resultado

Aqui temos duas colunas, o container principal tem uma largura de 500px. A largura de cada coluna está definida para 50%, de modo que cada coluna deve ter 250px de largura, embora nós também definimos o preenchimento para ela. Vamos abrir o arquivo no Internet Explorer 7, e executar a Ferramenta de desenvolvedor (F12) .

Vá até a aba Layout da ferramenta de desenvolvedor para ver o tamanho da coluna em detalhe. Você verá que no IE7 a coluna agora inclui o preenchimento, e também as bordas, como parte do tamanho total. No nosso caso, a largura da caixa permanece em 250px. Fácil assim.

box sizing internet explorer 7

Fonte: Hongkiat.com

Posts Relacionados

Comentários  

 
seo
#1 seo 12-11-2016 10:29
Hi there, You have done an excellent job. I will certainly digg it and personally suggest to my friends.
I am sure they'll be benefited from this website.


Check out my weblog; seo: http://www.huagongbeng.com/comment/html/index.php?page=1&id=52702
Citar
 

Adicionar comentário


Código de segurança
Atualizar

© 2017 iDesigns Studio. Todos Direitos Reservados.
Design Gráfico e Web Design - Centro, Vitória, ES