Ramon Victor

5 bugs que devemos evitar no IE6

| 15 Comments

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.

Author: ramonvictor

Designer de Interação e Desenvolvedor Frontend. Especialista em Design da Informação pela UFPE e graduado em Sistemas para Internet pela Faculdade Marista.

15 Comments

  1. Sobre o bug da margem duplicada eu costumo usar as vezes o position:relative; left:15px;

    Esse código o IE6 renderiza da mesma forma que os browsers mais atuais.

  2. RT @richardbarros RT @cristianoweb: RSS – 5 bugs que devemos evitar no IE6 http://migre.me/6i52

  3. RT @cleomorgause: 5 bugs que devemos evitar no IE6 http://www.ramonvictor.com/5-bugs-ie6/ #ie6

  4. RT: @cleomorgause: 5 bugs que devemos evitar no IE6 http://www.ramonvictor.com/5-bugs-ie6/ #ie6

  5. Para quem ainda não viu meu post sobre bugs do #ie6 : http://www.ramonvictor.com/5-bugs-ie6/ #css

  6. Pingback: 5 bugs que devemos evitar no IE6 | Createeve

  7. [resources] 5 bugs que devemos evitar no IE6 | Ramon Victor http://bit.ly/4MVG2U

  8. quem se importa com ie6??? azar de quem usa ie6!!! e eu lá vou perder meu tempo verificando como um css fica renderizado em ie6???
    f.o.d.a.m.-se os pobres q usam ie6.

  9. Muito obrigado cara! tava passando o pelo bug número 2 agora. Me salvou muito!
    RSS assinado na hora!
    Abraço!

  10. Display:inline; lietarlmente salvou minha vida. A zorra da DIv sumiu no IE6. Obrigadão!!!!!!!

    sérgio.

  11. No Blog: 5 bugs que devemos evitar no IE6. http://bit.ly/fooKm5

  12. Obrigado pela dica, foi muito util para mim

  13. Valeu cara muito bom mesmo, o diplay inline resolveu meu problema

Deixe uma resposta

Required fields are marked *.

*