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

  • 22 famílias de ícones gratuitos quentinhos do forno para Web Designers

    Quase todos os projetos de design requer ícones. Ícones podem ser encontrados em toda parte de um site e seu objetivo principal de orientar e dar informações aos visitantes é altamente importante. No post de hoje você vai encontrar mais de 20 novos conjuntos de ícones gratuitos para sua caixa de ferramentas, então salve esta página, a fim de voltar a ela quando necessário.

  • 20 lindos exemplos de websites com layouts estilo linha de tempo

    Tenho certeza que a maioria de vocês estão cientes do uso da linha de tempo no design, especialmente porque todos os perfis do Facebook são agora exibidos desta forma. Aqui eu coloquei 20 lindos sites com layout estilo linha de tempo para inspirar os seus próprios projetos.

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