Hack CSS no Internet Explorer 8: a imagem de fundo não está alinhada

Escrito por nicole martinez Google | Traduzido por luiza bomfim
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Hack CSS no Internet Explorer 8: a imagem de fundo não está alinhada
Use seus conhecimentos em CSS para alinha uma imagem de fundo (Jupiterimages/Comstock/Getty Images)

Ao criar um site, ele pode possuir uma imagem de fundo que indique onde cada elemento, como um bloco de textos ou uma lista de links, deve aparecer na página. Com o CSS , você pode customizar seus elementos HTML para criar um senso de sobreposição e alinhamento. Caso o Internet Explorer 8 não alinhe os objetos com a imagem de fundo como desejado, você pode usar o que sabe sobre alterações no programa sem a permissão do proprietário (hacks) do CSS para resolver esse problema.

Outras pessoas estão lendo

Zerando Margens

Muitas vezes, o termo "hack CSS" refere-se ao uso de CSS para soluções alternativas que irão atender a um navegador específico, nesse caso, o Internet Explorer 8. Você só poderá aplicar alguns tipos de CSS ao Internet Explorer 8 em alguns métodos usando declarações condicionais dos seus usuários do servidor depois de determinar o navegador do seu visitante. Por exemplo, você pode especificar uma única linha de texto no seu CSS assim:

<style type="text/css"> [if IE 8] * { margin: 0; padding: 0; } </style>

Uma alternativa é carregar uma folha de estilo completo para o Internet Explorer 8 usando a seguinte sintaxe:

<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="ie8.css" /> <![endif]-->

Zerando Margens

Quando a imagem de fundo e outros objetos não estiverem alinhados no seu site, tente zerar as margens. Isso irá sobrescrever as margens padrão entre objetos e a própria página, as quais podem diferenciar de acordo com o navegador. O código a seguir irá zerar as margens ou o "padding" (espaçamento entre o conteúdo e as bordas) para qualquer elemento na página em qualquer navegador.

*{ margin: 0; padding: 0; }

Feito isso, você poderá começar a codificar o seu site para que a imagem de fundo fique alinhada com os objetos sobrepostos.

Considerações

Resetar as margens ou o "padding" aplicado em qualquer elemento da sua página. Por isso terá que especificar as margens (determina a distância de um elemento para outro) e o "padding" (determina a distância entre o conteúdo de determinado elemento e sua borda), por padrão, de cada elemento. Caso seu site possua vários elementos, essa solução talvez não seja a melhor. Se estiver alinhando quaisquer elementos em um posicionamento relativo, o alinhamento pode ser ainda mais suscetível às margens padrão do Internet Explorer 8. Considere usar um posicionamento fixo que irá colocar o seu objeto em relação à janela do navegador e não a outros elementos, que podem variar de posição.

Alinhando o plano de fundo

Com o CSS, existem diversas opções padrão para o alinhamento de imagens do plano de fundo dos seus elementos, caso esse elemento seja a própria página ou uma camada div. Por exemplo, você pode alinhar o plano de fundo à parte superior esquerda, direita ou à parte central. Para um alinhamento mais preciso, você pode usar uma porcentagem (da largura ou altura do recipiente). No exemplo a seguir, o plano de fundo começará a 10 pixels da esquerda e a 200 pixels do topo, o que pode ajudar a alinhá-lo a outros conteúdos da página.

div { background-position:10px 200px; }

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível