Ir para conteúdo / Skip to content

COMO PREVINIR O BUG DE DUPLA MARGEM NO IE

blog reactions Postado em: 30 de outubro de 2007 por Pedro Rogério

Muitas pessoas já devem ter passado por esse tipo de problema e nem sabiam o por que de ocorrer isso, mas se repararem, quando você defini uma margem para algum elemento de uma página, e esse elemento tem um float na mesma direção da margem, ela é duplicada. Isso ocorre no IE6, não sei em versões anteriores, mas na versão 7 isso já foi corrigido.

Para vocês verem o que acontece, dêem uma olhada nesse exemplo. Eu defini um float:left para a Div e uma margem esquerda no valor de 200px, no IE6 isso vai para 400px. A maneira de corrigir isso é muito simples, basta definir um display:inline para a Div que tudo volta ao normal, vejam como ficou agora.

Deixe seu comentário

17 comentários para esse post

  1. Eliseu disse: 30.10.07 ás 08:15
    #1

    Caramba, passei por isso ontem a noite, ae tive que tomar atitudes com posição absoluta e setar medidas para topo e esquerda. Agora ficarei mais esperto, hehehe. Obrigado!!!

  2. Allan disse: 30.10.07 ás 08:44
    #2

    show!
    =)
    post curto mais ótimo!

  3. Joel disse: 30.10.07 ás 11:51
    #3

    Me pergunto: porque eu não soube disso antes?

  4. José Carlos Araújo disse: 30.10.07 ás 12:51
    #4

    Putz… show de bola uhaeuhaehuaehu

  5. Newton Calegari disse: 30.10.07 ás 14:18
    #5

    Opa!
    Muito bom! :)

    Ah Pedro, te convidei para um meme (http://newtoncalegari.com/blog/blogosfera/meme-indique-um-blog), se possível, responde ae.

    Abraço, Newton Calegari

  6. Rodrigo Medeiros disse: 30.10.07 ás 14:22
    #6

    Creio q a maioria dos webdesigners que quebram a cabeça com isso, (assim como eu) pensava que o IE dobrava os valores, bom saber qual o erro exato agora, fica mais facil de trabalhar, Muito bom o post. Abração.

  7. VitorGGA disse: 30.10.07 ás 17:50
    #7

    Eo jah tenho um cssfix aki que regula todas essas merda do IECA

  8. Eliseu disse: 30.10.07 ás 18:30
    #8

    Vitorgga, disponibiliza para nós para melhorarmos nossas técnicas de anti-ieca kra, valeu, hehe

  9. Diogo disse: 31.10.07 ás 10:19
    #9

    Show essa dica, sempre passo por isso e fica arrumando por IE, ow VITORGGA que cssfix é esse que corrige automaticamente os bugs do IE, se puder manda pro blog.. vlw! ;)

  10. Yalli Oliveira disse: 02.11.07 ás 11:41
    #10

    Apesar do IE7 ter corrigidos alguns dos problemas de renderização do .css, ele ainda apresentar muitos bugs, oque nos faz perder um pouco a paciência.

  11. Anderson Custódio disse: 03.11.07 ás 08:04
    #11

    Pra contornar isso eu uso só o left, com position: relative; = )

  12. Virginia disse: 05.11.07 ás 14:00
    #12

    Também queria saber como resolver este problema no IE.
    Então VITOR você pode dizer pra gente como funciona o cssfix que você falou?

    IE realmente da muita dor de cabeça.

  13. Julio Cesar Bitencourt Silva disse: 06.11.07 ás 15:33
    #13

    Ótimo post! Muito útil…acabei de resolver esse problema através deste post!

  14. Diego Marques disse: 06.11.07 ás 23:07
    #14

    No caso o ie6 tbm dobra os valores de margem superiores e inferiores com o float, como resolver isto?

  15. Billy Blay disse: 09.11.07 ás 16:18
    #15

    Muito interessante!

    Este artigo veio na hora certa. eu o li hoje na parte da manhã, e por sorte ou azar me deparei com este bug.

    Maravilha resolveu na hora.

    Obrigado!

  16. Giovanni disse: 30.11.07 ás 11:16
    #16

    Muito obrigado pela dica!
    Funcionou perfeitamente!
    Parabéns!

  17. Adriano disse: 14.05.08 ás 11:10
    #17

    mto brigado pela dica!
    tava me matando p/ acertar uma tela que já era p/ ter entregue mas tava exatamente com esse bug.

    valeu!!

Deixe seu comentário