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

  • Você deve contratar um Web Designer ou usar um construtor de sites?

    Construtores de sites são basicamente uma caixa de ferramentas mágica para pessoas que não são web designers. A questão agora é, você deve contratar um web designer para fazer o seu site ou simplesmente usar um construtor de sites e construí-lo você mesmo?

  • 5 ferramentas recentes de desenvolvimento Web que você deve conhecer

    Hoje, a internet está crescendo exponencialmente. Ela também está ficando mais complexa do que nunca. Precisamos de mais ferramentas que possam nos ajudar a livrar um pouco do peso de desenvolvimento de sites. Assim, neste post, reunimos um conjunto de ferramentas modernas que vão ajudar no desenvolvimento web.

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