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

  • Como fazer seu site se destacar entre todas as últimas tendências

    Você trabalhou duro para criar um site de primeira linha que reflete o maior e mais recente em tecnologia, conteúdo envolvente e design. Você pode estar feliz com ele, mas ele parece ser melhor do que a sua concorrência? Mais importante, ele reflete o seu público? O seu site precisa se destacar, ainda assim, ser eficaz e atraente para um consumidor que está por dentro das últimas tendências e tecnologias. Soa complicado? Na verdade é bem simples. Veja como fazer o seu site se destacar entre todas as últimas tendências.

  • Dreamweaver - Os segredos para você aproveitar melhor os softwares que usa.

    Uma série de artigos que vão ajudar qualquer designer a ter mais tempo para ser criativo.

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