DOCTYPE rigoroso que afeta o espaçamento entre as imagens

StackOverflow https://stackoverflow.com/questions/489974

  •  20-08-2019
  •  | 
  •  

Pergunta

Estou tendo problemas com meu espaçamento de imagem quando eu mudei para XHTML DOCTYPE rigoroso.

O código a seguir - que usa estilo de reset do Yahoo para matar todas as mordomias navegador padrão - deixa uma lacuna de cerca de 4 pixels entre as duas imagens abaixo mas só quando eu uso o doctype estrito. Por que isso?

É apenas um problema no Chrome e Firefox. IE não mostrar um único pixel entre as duas imagens. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>

<body>

<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>


</body>
</html>
Foi útil?

Solução

Usando resposta de Pedro como iniciar as seguintes correções o problema: 

img { vertical-align: bottom }

A razão isto funciona é que o padrão para vertical-align é baseline, o que equivale à parte do texto "acima da linha", onde os dangly pedaços pendem (minúsculas g, q, etc tudo para seguir essa linha de base).

Assim, a fim de deixar espaço foi deixando 4px de espaço para essas saliências.

Hope que fazia sentido.

Editar: ajuda Visual de site de origem
text alt
(fonte: brightlemon.com )

Outras dicas

Mais informações sobre as lacunas imagem misteriosos pode ser encontrada aqui:

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Usando Firebug mostra que é o DIV que faz com que o espaçamento, em vez da imagem.

Eu definir font-size: 0; para o topo div ea diferença vai embora.

(Estranhamente, não é / deve ser um font-size herdada:. 0; do corpo no restauro de min.css então não tenho certeza por que isso funcionou)

Em doctypes estritas, a imagem torna-se um elemento inline, e se comporta como texto. Daí você precisa mudar sua propriedade vertical-align, ou alterar sua propriedade display para display: block, ou display:inline-block

Tentando afastar erros comuns, fiz a validação passar o código por não menos que 8 erros de validação de fixação.

Geralmente, se um navegador não pode analisar o documento no DOCTYPE dado, os resultados não são especificadas.

Ainda não trabalho você mente, mas aqui está o código de validação: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
    <title>Required</title>
</head>

<body>

    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>

</body>
</html>

O display:. Solução inline-block definitivamente não fez trabalho para me

O vertical-align: solução de fundo fez trabalho, mas com uma ressalva: dependendo da situação, havia imagens que eu tinha que em vez definida para vertical-align: top

A mudança para padrões soltos em vez de estrita funcionou para mim ... manteve o IE formatação que eu necessário, mas eliminou a estranha imagem espaçamento no Firefox e Chrome.

https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Mode

Usado a linha: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top