Strikte DOCTYPE beeinflussen Abstand zwischen den Bildern

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

  •  20-08-2019
  •  | 
  •  

Frage

Ich habe Probleme mit meinem Bildabstand, wenn ich eingeschaltet Strict DOCTYPE auf XHTML.

Der folgende Code - der Reset-Stylesheet Yahoos nutzt all Standard-Browser padding abzutöten - hinterlässt eine Lücke von etwa 4 Pixeln zwischen den beiden Bildern unten aber nur, wenn ich die strikte Doctype verwenden. Warum ist das?

Es ist nur ein Problem in Chrome und Firefox. IE nicht ein einzelnes Pixel zwischen den beiden Bildern zeigen. 

<!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>
War es hilfreich?

Lösung

Die Antwort des Petrus Verwendung als die folgenden Updates das Problem starten: 

img { vertical-align: bottom }

Der Grund, dies funktioniert, ist, dass der Standard für vertical-align baseline ist, die „über dem Strich“ auf den Teil des Textes entspricht, wo die dangly Bits nach unten hängen (Kleinbuchstabe g, q, etc alle unterhalb dieser Basislinie hängen).

Also, um Raum zu verlassen, es wurde für diese Auskragungen 4px Raum zu verlassen.

Hope, die Sinn machte.

Edit: Sehhilfe von Quellort
alt text
(Quelle: brightlemon.com )

Andere Tipps

Weitere Informationen über die misterious Bildspalte finden Sie hier:

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

Mit Firebug zeigt, dass es die DIV ist, die den Abstand verursacht, anstatt das Bild.

Ich habe font-size: 0; für den Top-div und den Spalt geht weg.

(Merkwürdig ist, dass es / sollte ein vererbte font-size sein. 0; aus dem Körper in dem Reset-min.css so nicht sicher, warum dies funktionierte)

In strikten doctypes Bild wird ein Inline-Element, und verhält sich wie Text. Daher müssen Sie seine vertical-align Eigenschaft ändern, oder seine Anzeige Eigenschaft ändern display: block oder display:inline-block

Der Versuch, häufige Fehler auszuschließen, habe ich den Code Pass Validierung von nicht weniger als 8 Validierungsfehler beheben.

Generell gilt: Wenn ein Browser, um das Dokument in der angegebenen DOCTYPE nicht analysieren kann, sind die Ergebnisse nicht näher bezeichnet.

Es ist noch nicht Geist Sie arbeiten, aber hier ist die Validierung Code: 

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

Das Display:. Inline-block-Lösung auf jeden Fall nicht für mich arbeiten

Der vertical-align: bottom Lösung hat funktioniert, aber mit einer Einschränkung: je nach Situation gab es Bilder, die ich stattdessen musste auf vertical-align: top

Die Umstellung auf lose Standards statt streng für mich gearbeitet ... hielt die IE-Formatierung, die ich benötigt, sondern eliminiert die ungeraden Bildabstand in Firefox und Chrome.

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

verwendet, um die Zeile: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top