5 bugs que devemos evitar no IE6

A comunidade de desenvolvedores que trabalham com codificação (XHTML e CSS) sabem o quanto é árdua a tarefa de deixar tudo, ou quase tudo, funcionando bem no browser Internet Explorer 6. Vários manifestos já foram feitos pelos desenvolvedores para tentar matar o IE6, porém percebemos que a porcentagem de acesso por esse suposto browser ainda é considerável. Por esta razão resolvi listar algumas dicas para evitar alguns bugs comuns.

1. 1. Bug da margem duplicada

   Acredito que esse seja o mais comum. É causado quando flutuamos algum elemento e damos margem para a mesma direção. Veja o código exemplo:

   div {
   float: left;
   margin-left: 15px
   }

   Nesse caso o IE6 interpretaria a margem como 30px. Uma das soluções para o erro seria declarar a div como display: inline. Resolveria o problema e não afetaria nada nos demais browsers. Porém eu costumo fazer o possível para não declarar margem para o lado flutuado, como solução tento sempre utilizar o padding no próprio elemento ou no elemento pai. Neste caso adote a solução que lhe adequar melhor.

2. 2. Posicionamento absoluto

   É provocado quando existe um elemento flutuando após um elemento absoluto. Quando isso ocorre o elemento absoluto desaparece. Parece mentira não é ? mas de fato acontece. Bom, para resolver é preciso colocar uma div pai no elemento flutuado, veja o exemplo:

   CSS

   #absoluta {position: absolute}
   #right { float: right}

   XHTML Com bug

   <div id="absoluta">Content</div>
   <div id="right">Conteudo flutuado para a direita</div>
   

   XHTML Solução

   <div id="absoluta">Content</div>
   <div>
   <div id="right">Conteúdo flutuado para a direita</div>
   </div>

3. 3. Bug do Caracter duplicado (eco)

   Acontece em casos muitos especificos. Já fui vítima desse bug e consegui solucionar depois de muita dor de cabeça. Andei pesquisando e consegui encontrar esse comentário do maujor onde ele prorõe 4 soluções.

   “Para a segunda e terceira DIV flutuada IE indenta aproximadamente 3px. Resulta um total de 6 px de diferença na largura total em relação aos browsers standards. Esta indentação faz com que o caracter pule para a próxima linha de flutuação.
   No caso podemos adotar as seguintes soluções:
   1a.Solução: diminuir 2px na width de cada DIV (3 x 2px = 6px) de 177px para 175px;
   2a.Solução: aumentar 6px na DIV conteúdo, de 608px para 614px;
   3a.Solução: diminuir 6px total nas margens laterais das DIV
   4a.Solução: declarar display:inline para as 3 DIV flutuadas.”

4. 4. Bug da altura

   Quando a altura de um elemento é declarada os browsers web standards consideram que ela vai ser fixa, independente se o conteúdo ultrapasse a altura ou não. Observe:

   div {
   width: 200px;
   height:20px;
   background-color: #ccc
   }

   <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit justo, malesuada eget lobortis sit amet, venenatis at odio. In hac habitasse platea dictumst.
   </div>

   Faça esse teste e perceba que no Firefox a div vai continuar mantendo os 20px de altura mesmo o conteúdo passando. Já no IE6 a altura vai se adaptar ao conteúdo. Esse comportamento errado do IE6 é compatível com a declaração min-height (altura mínima).

5. 5. Bug do 50% + 50% > 100%

   Esse bug é provocado quando usamos dos elementos flutuados, dentro de um container, com largura de 50%. Ao somar 50% + 50% o IE6 resulta em mais de 100%. Para solucionar o problema precisamos utilizar uma declaração especifica para ie6 setando o valor da largura das divs como 49,9%.

E vocês? Já foram vítimas de outros bugs? Compartilhem comentando.

Referência:

SILVA, Maurício. Construindo sites com CSS e (X)HTML. Novatec, SP: 2008.