kadunew.com/blog » float http://www.kadunew.com/blog Dicas e artigos sobre Web Design e Web Standards Fri, 30 Jul 2010 05:12:47 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Bug do Internet Explorer 6 (IE6) – Margem dobradas http://www.kadunew.com/blog/css/bug-do-internet-explorer-6-ie6-margem-dobradas http://www.kadunew.com/blog/css/bug-do-internet-explorer-6-ie6-margem-dobradas#comments Tue, 03 Feb 2009 13:45:54 +0000 Carlos Eduardo - Kadu http://www.kadunew.com/blog/?p=230 Bugs do Internet Explorer 6 são erros que ocorrem na hora da renderização dos elementos devido esse navegador não seguir os padrões web de desenvolvimento. A Microsoft fez uma grande correção na quantidade dos bugs do Internet Explorer 7 e promete que o seu mais novo navegador, o Internet Explorer 8, seja 100% padrões web.
Como a maioria dos bugs concentram-se no Internet Explorer 6, vou apresentar alguns bugs clássicos e suas respectivas soluções desse navegador.

Bug da margem dobrada

Este bug acontece sempre que flutuamos um elemento à esquerda (ou à direita) e declarar para o mesmo elemento uma margem para o mesmo lado que o elemento foi flutuado. O IE 6 e anteriores dobrar o valor da margem.
Veja o exemplo:

...
<style type="text/css" media="all">
#float{
	width: 250px;
	height: 250px;
	background: #FF0000;
	float: left;
	margin: 10px 0 0 50px;
	}
</style>

</head>
<body>
<div id="float">DIV com float</div>
</div>
</body>
</html>

Observe na imagem a renderização errada no navegador IE e a correta no navegador Opera.

bug margem dobrada ie6

bug margem dobrada ie6

A solução do bug

A solução para este bug é simples, é só declarar display:inline; para o elemento flutuado. Veja o exemplo abaixo:

 
#float{
	display:inline;
	width: 250px;
	height: 250px;
	background: #FF0000;
	float: left;
	margin: 5px 0 0 50px;
	}

Elementos que são flutuados assumem a condição de elementos nível de bloco, sendo que navegadores padrões ignoram essa declaração.

Isso vai interessar você também

]]> http://www.kadunew.com/blog/css/bug-do-internet-explorer-6-ie6-margem-dobradas/feed 0