Este é o meu primeiro Post. Demorei muito antes de escolher por onde começar, deveria iniciar por problemas antigos que já resolvi e deveria compartilhar com os sofredores desenvolvedores HTML / CSS, ou deveria começar com problemas recentes?

Resolvi começar então com um problema que um companheiro de trabalho teve hoje e que eu já havia enfretado. Mais uma vez, é um bug do IE. Alguém já percebeu, que ao usar um float, por exemplo, com o valor left, ao usar a propriedade margin, por exemplo, de 100px, o IE na verdade faz esta margem ficar com 200px? Para entender melhor, logo abaixo está a solução traduzida do site Position is Everything. O texto original encontra-se no endereço http://www.positioniseverything.net/explorer/doubled-margin.html . O texto abaixo foi resumido e readaptado.

O que há de errado?

Um programador inocentemente coloca um float para esquerda em um box, e usa uma margem esquerda no float para tirálo da extremidade um pouco. Parece bem simples não? Simples até ser visualizado no Internet Explorer, onde a margem esquerda misteriosamente é duplicada!

A maneira que deve ser

O exemplo abaixo mostra uma DIV beje em que está contida um box verde com a propriedade float: left e uma margem esquerda de 100px. Até aqui tudo bem.

Exemplo da propriedade float com margin

Abaixo está o código que gera esta visualização:

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  /*Este ultimo valor aplica uma margem de 100px
     a esquerda do box beje */
}

A dobradinha no IE

O mesmo código faz o Internet Explorer mostrar de uma maneira levemente diferente. A figura abaixo mostra como o IE faz este arranjo.

Demonstração do BUG da margem dupla no IE

Que diabos está acontecendo? Não faça estas perguntas bobas, é o IE, não se lembra? Conformidades com as especificações são somente esperadas, não aplicadas.

Pontos importantes

Este bug ocorre somente se a margem no float vai na mesma direção do float. Ou seja, se você deu um float left e um margin-left, o bug ocorrerá no IE. Somente a primeira linha de float irá ser atingido pelo bug. Além disso, a margem dupla apresenta simetria, trabalhando da mesma maneira para a esquerda, quando para direita.

Finalmente, uma saída

Steve Clason descobriu uma saída. Esboçada nesta demonstração. Ela corrige tanto este bug da margem dupla quanto outro bug da identação de texto também. É um bug clássico do IE, usando uma propriedade para corrigir um bug que afeta uma uma propriedade irrelevante.

E a solução?

Olhe isto. Simplesmente coloque display: inline no box que está com a propriedade float e assim todos os browsers vão visualizar de maneira semelhante, incluindo o IE.

Abaixo está o código com a respectiva propriedade que estava faltando para corrigir o bug:


.floatbox {

    float: left;
    width: 150px;
    height: 150px;
    margin: 5px 0 5px 100px;
    display: inline;

    /* Esta propriedade acima
        corrige o bug no IE */
  }

Abaixo está o código na prática, uma sem o display: inline e outra com o display: inline. Visualize no IE para ver como ele renderiza esta página.

Demonstração do BUG da Dupla margem.

Espero que tenha sido útil com o este post, é primeiro de muitos retratando todos os problemas que surgem no dia a dia do desenvolvimento Web Cross-Browsers. No próximo irei falar de mais uma propriedade que surge como uma luz na escuridão, desta vez não é um BUG do IE, mas do Firefox.

5 Replies to “Bug da dupla margem no IE”

  1. Alexandre! Não podia ter melhor primeiro post!!!

    Eu estava passando por esse bug e não entendia porque… até tinha desistido, já que o margin-left era 5px só e dava pouca diferença.

    A solução veio em boa hora! Valeu.

  2. Eu estava batendo cabeça desde ontem à noite com esse problema..

    Agora tenho umas sugestões:

    Vamos organizar uma carreta? Com o seguinte tema:
    “MORTE AO INTERNET EXPLORER !!”
    Entupir a caixa postal da Microsoft com emails com o título:
    “Por que vocês não seguem os padrões ????”

    hehehehe

    Um abraço []

  3. É uma boa idéia, eles merecem. Acho que melhor seria ainda colocarem os desenvolvedores do IE para desenvolver um site utilizando css e fazê-lo funcionar crossbrowser, acho que só assim para eles entederem e tomarem vergonha na cara 🙂

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *