DOCTYPE rigoroso che influenza la spaziatura tra le immagini

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

  •  20-08-2019
  •  | 
  •  

Domanda

Riscontro problemi con la mia spaziatura delle immagini quando sono passato a XHTML Strict DOCTYPE.

Il seguente codice - che utilizza il foglio di stile di ripristino di Yahoo per eliminare tutte le imbottiture predefinite del browser - lascia uno spazio di circa 4 pixel tra le due immagini sottostanti, ma SOLO quando uso il rigoroso doctype. Perché questo?

È solo un problema in Chrome e Firefox. IE non mostra un singolo pixel tra le due immagini. 

<!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>
È stato utile?

Soluzione

Utilizzando la risposta di Peter come inizio, il seguente risolve il problema: 

img { vertical-align: bottom }

Il motivo per cui funziona è che il valore predefinito per vertical-align è baseline, che equivale alla parte del testo " sopra la riga " dove i bit pendenti pendono (minuscole g, q, ecc. pendono tutti al di sotto di questa base).

Quindi per lasciare spazio lasciava 4px di spazio per questi strapiombi.

Spero che abbia senso.

Modifica: aiuto visivo dal sito di origine
alt text
(fonte: brightlemon.com )

Altri suggerimenti

Ulteriori informazioni sulle misteriose lacune nell'immagine sono disponibili qui:

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

L'uso di Firebug mostra che è il DIV che causa la spaziatura, piuttosto che l'immagine.

Ho impostato la dimensione del carattere: 0; per il top div e il gap scompare.

(Stranamente, c'è / dovrebbe essere una dimensione del carattere ereditata: 0; dal corpo in reset-min.css, quindi non sono sicuro del motivo per cui ha funzionato.)

In rigorosi documenti, l'immagine diventa un elemento incorporato e si comporta come un testo. Quindi è necessario modificare la proprietà vertical-align o modificare la proprietà di visualizzazione in display: block o display:inline-block

Cercando di escludere errori comuni, ho fatto la convalida del passaggio del codice correggendo non meno di 8 errori di convalida.

Generalmente se un browser non può analizzare il documento nel DOCTYPE fornito, i risultati non sono specificati.

Ancora non funziona, ma ecco il codice di convalida: 

<!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>

Il display: la soluzione inline-block sicuramente non ha funzionato per me.

La soluzione vertical-align: bottom ha funzionato, ma con un avvertimento: a seconda della situazione, c'erano delle immagini che dovevo invece impostare su vertical-align: top

Il passaggio a standard allentati anziché rigorosi ha funzionato per me ... ha mantenuto la formattazione di IE che avevo richiesto, ma ha eliminato la disparità di spaziatura delle immagini in Firefox e Chrome.

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

Ha usato la linea: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top