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

  • Bloggers: 6 Passos para a fórmula perfeita de desenvolver seu SEO

    Com as mudanças no algoritmo de busca do Google do ano passado, se tornou ainda mais difícil acertar a forma correta de criar artigos e posts para serem bem ranquiados. Neste post vamos explorar 6 passos para a forma correta de otimizar seus posts para motores de buscas.

  • Como detectar se o dispositivo é móvel (portátil) ou não utilizando PHP

    Se você está desenvolvendo um website responsivo ou um website que terá um template que funcionará com dispositivos móveis, em algum momento você vai precisar detectar se o site esta sendo acessado por um computador normal, ou um dispositivo portátil. Claro que você pode fazer a maioria das funções utilizando apenas Media Queries no CSS, mas caso queira carregar scripts apenas se o dispositivo for ou não móvel, vai precisar de uma outra forma de detectar isso, saiba como.

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