Pinceladas da Web

Quem é desenvolvedor Front-end sabe do famoso bug da margem dupla no IE6, mas se você nem sabia que isso existia, vamos aos fatos. No IE6, se você aplicar float a um elemento, e depois aplicar margin para o mesmo lado que foi aplicado o float, essa mesma margem fica com o valor dobrado. Exemplo, apliquei float:left a um botão e depois defini que ele terá um margin-left:100px, em qualquer browser isso será 100px, mas no IE6, isso virá 200px. Para corrigir isso basta aplicar um display:inline ao elemento que ocorre o bug e tudo fica OK.

Esse comportamento foi corrigido em versões posteriores do browser, ou quase, pois um bug semelhante ocorre no IE7, só que agora com a margem em outra direção. Vou explicar detalhadamente o bug para que vocês possam entender, e para isso, observem a marcação HTML abaixo:

<div class="box">
      	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu nunc vel ipsum viverra blandit eu vitae risus. Nulla iaculis ante nec risus gravida adipiscing. Integer pretium nibh vitae odio feugiat volutpat. Quisque sodales pellentesque nulla ut lacinia. Quisque in neque non magna pulvinar convallis eu in mi. Ut quis pretium enim. Sed non pulvinar turpis. Aliquam vehicula odio sed turpis eleifend semper nec eu dolor.</p>
       <a href="#" title="Eu sou um link">Eu sou um link</a>
</div>

Até então, nada demais com essa marcação HTML, tudo muito simples, mas se por exemplo, eu aplicar float ao link, e definir um margin-bottom para o meu parágrafo, o link herda a margin do parágrafo. Portanto, a lógica é a seguinte, se eu tenho um elemento com float, e seu irmão (elemento antecessor no código) possui margin-bottom, o elemento com float herda o margin-bottom. Querem ver o que acontece, vejam o exemplo criado, funciona OK em qualquer browser, menos no IE7. Se você está com preguiça de abrir o IE7, veja só o que acontece na imagem abaixo:

Como podem ver, definir que meu parágrafo teria um margin-bottom:100px, ao aplicar float no link, ele também ficou com um margin-bottom de 100px. Possíveis soluções:

• Trocar margin por padding
• Remover o margin-bottom do parágrafo e aplicar margin-top ao link

No exemplo eu optei por remover a margem do parágrafo e aplicar ao link, portanto, vejam agora o exemplo sem bug. Jà havia passado por isso várias vezes e nunca havia encontrado solução, consertava isso através de “gambiarras”, mas através de um reply do Rafael Pazio no Twitter, encontrei a solução para o problema. Agora seu chefe vai ficar feliz quando você mostrar a ele que encontrou a solução para os problemas.