Entre as várias engraçado "interpretações" que o Internet Explorer 6 pode fazer com HTML / CSS, a da "margem de casal" é certamente o mais tedioso e muitas vezes. Na prática (ouvir, ouvir ...) browser Microsoft bons podem - misteriosamente - a dupla margens em itens que são definidos a flutuar! : Como tal o seguinte CSS aplicado a uma div com o ID de box :
1 | display : block ; width : 100px ; height : 100px ; margin-left : 100px ; float : left } div # caixa {display: block; width: 100px; height: 100px; margin-left: 100px; float: left} |
Você recebe:
Onde n é a margem esquerda do nosso 100px! si trova a diretto contatto con il suo contenitore. Este defeito, felizmente, ocorre apenas em determinadas circunstâncias, ou seja, quando a margem coincide com a direção da float e quando a nossa div#box está em contato direto com seu recipiente. precedente. Isto significa que um adicional de div#box na mesma linha não sofre por causa do problema está do lado esquerdo, mas não o container div#box acima. Obviamente o problema não é específico para a margem esquerda, mas especular invertendo a coisa toda teria o mesmo problema com a margem direita!
Solução
A solução é muito simples: basta inserir a declaração display:inline no nosso CSS, eo defeito desaparece:
1 2 | display : block ; width : 100px ; height : 100px ; margin-left : 100px ; float : left ; caixa de div # {display: block; width: 100px; height: 100px; margin-left: 100px; float: left; inline } display: inline} |
A introdução do display:inline será ignorado por todos os outros navegadores, e não porque estamos particularmente sorte, mas sim pela específicas W3C :
... O 'display' é ignorado, a menos que ele tenha 'none' o valor.
Eu não entendi uma coisa:
na definição da classe deve estar presente tanto no display: block para display: inline. ?
deixando apenas o segundo tem o mesmo defeito?
obrigado
@ Maurício:
O
display:blockvocê pode substituí-lo comdisplay:inlineLembro-me que foi um dos primeiro bug a que fui confrontado com IE6.
)
Pelo menos neste caso, a solução é de pelo menos de imediato (desde que você sabe
[...] Nós simplesmente explica como eliminar o problema da dupla margem no IE6, o veneno da web [...]
Você é um grande, você faria um monumento! Clara, simples e rápido! Ótimo post
Você é um GRANDE! ele funciona muito bem. agora meus botões são vistas apenas uma vez. O comando "display: inline" aborda uma miríade de problemas no IE.