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.
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.
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.
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.
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 []
É 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 🙂
Dica muito importante! Esse é um problema que atormenta muitos, inclusive eu! rsrsrs
Obrigado pela ajuda Alexandre!
Abraços!
IE SUX