Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

afbartels

Problema com CSS no Internet Explorer

Por , em Desenvolvimento frontend

Recommended Posts

afbartels    0

afbartels
Postado

Olá Pessoal!!! estou tendo problemas com imagens no Internet Explorer versões anteriores a 10. Não consigo unir duas imagens, fica sempre um espaço entre elas. Já nas versões 10 e 11 está OK. Segue abaixo o código.

<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <style type="text/css">
        *{ border: 0px; }
        #menu{  padding: 0px; margin: 0px; border: 0px; display: flex; }
        #img{ border: 0px; margin: 0px}
        #institucional{  border: 0px;  padding: 0px;  margin: 0px;}
        #transparencia{  border: 0px;  padding: 0px;  margin: 0px;}
    </style>

</head>
<body>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <div id="menu">
            <img alt="" height="35" id="institucional" src="img/menu-topo/institucional-off.gif"  width="75" style="display: flex" />
            <img alt="" height="35" id="transparencia" src="img/menu-topo/transparencia-off.gif"  width="86" style="display: flex" />
            <img alt="" height="35" id="osite" src="img/menu-topo/o-site-off.gif"  width="110" />
        </div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Testei algumas vezes aqui, e não consegui retirar esse espaçamento. Estou meio sem tempo aqui pra pesquisar, mas você pode envolver as imagens em algum outro elemento? Se sim, teste:

<html>
<head>
	<meta charset="utf-8">
	<title>Teste</title>
	<style>
		* {
			border: none;
			margin: 0;
			padding: 0;
		}
		#menu {
			display: inline-block;
		}
		#menu span {
			float: left;
		}
	</style>
</head>
<body>
		<div id="menu">
			<span><img src="http://placehold.it/75x35" width="75" height="35"></span>
			<span><img src="http://placehold.it/86x35" width="86" height="35"></span>
			<span><img src="http://placehold.it/110x35" width="110" height="35"></span>
		</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Entendendo o que acontece

Porquê aparece o espaço entre as imagens

 

Imagens são elementos da marcação HTML do tipo inline.

Assim, quando você marca uma imagem após outra elas são renderizadas em uma mesma linha e os espaços em branco (seja um ou mais espaços) existentes, na marcação, entre elas é renderizado como sendo um espaço em branco.
Tudo se passa como se cada imagem fosse uma palavra de um texto (quando você escreve um texto na marcação separa as palavras com um espaço que é renderizado).

Soluções

 

Primeira solução

Se você alterar a marcação HTML colocando uma tag IMG logo após a outra (sem espaços entre elas) e não uma em cada linha da marcação o problema desaparece. É como se você estivesse escrevendo um texto com uma palavra "grudada" na outra (grudadanaoutra).

 

Segunda solução

Se você declarar tamanho de fonte zero para o container das imagens, #menu { font-size:0;} o espaço desaparece.
Por que? Em um texto o espaçamento entre palavras varia com o tamanho da fonte.
Veja ==> palavra palavra e palavra palavra
Diminuindo o tamanho da fonte diminui o espaçamento entre palavras até o limite de tamanho zero quando o espaçamanto desaparece (lembre-se, as imagens se comportam como palavras)

Terceira solução

Flutuar as imagens à esquerda ou à direita. Elementos flutuados são posicionados dentro do seu container, um ao lado do outro sem espaçamentos. Flutuar, na maioria das vezes, requer que se "clareie" os floats, mas isso é outra história.

 

Finalizando

 

A melhor solução poderá ser qualquer uma das três ou mesmo outra não relacionada neste post, pois são as necessidades de cada projeto que irão determinar a solução.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito