Strict-DOCTYPE Auswirkungen auf die Abstände zwischen den Bildern

Ich habe Probleme mit meinem Bild Abstand, wenn ich umgestellt auf XHTML Strict DOCTYPE.

Des folgenden code - was nutzt Yahoo die reset-stylesheet zu töten, alle Standard-browser-Polsterung - hinterlässt eine Lücke von etwa 4 Pixel zwischen den beiden Bildern unten aber NUR wenn ich den strict-doctype. Warum ist das so?

Es ist nur ein problem in Chrome und Firefox. IE zeigt nicht an ein einziges pixel zwischen zwei Bildern.

<!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>
InformationsquelleAutor Simon_Weaver | 2009-01-29
  1. 14

    Über die Antwort des Petrus als Beginn der folgenden behebt das problem:

    img { vertical-align: bottom }

    Der Grund, warum dies funktioniert, ist, dass der Standard für vertical-align ist baseline auf, das entspricht zum Teil dem text "über der Linie", wo die dangly bits nach unten hängen (Kleinbuchstaben g, q, etc. alle hängen unterhalb dieser Basislinie).

    So, um Platz zu lassen, es war verlassen 4px Platz für diese überhänge.

    Hoffnung, dass Sinn gemacht.

    Edit: Sehhilfe aus source-Website

    Strict-DOCTYPE Auswirkungen auf die Abstände zwischen den Bildern

    (Quelle: brightlemon.com)

    • ein bisschen Sinn gemacht - und es funktioniert auch. irgendwelche Nebenwirkungen davon? ich denke, ich werde sehen, ob meine anderen Bilder suchen an der falschen Stelle, wie ich zu ihm kommen. einzige was ich überlege ist, ob ich jemals inline-Bilder in text wie bulletpoints - aber dann kann ich immer an der Grundlinie verwenden es
    • Lesen Sie auch die Artikel genannt, die von ionut (developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps). es geht ins detail und spricht über die Zukunft beheben
    InformationsquelleAutor Allain Lalonde
  2. 7

    Mehr Informationen über das geheimnissvolle Bild Lücken können hier gefunden werden:

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

    • sehr Gründliche und hilfreiche Artikel. Dank
    InformationsquelleAutor Ionuț G. Stan
  3. 3

    Mit Firebug zeigt, dass es das DIV-Element, das bewirkt, dass der Abstand, eher als das Bild.

    Ich font-size: 0; für das top-div und die Lücke verschwindet.

    (Seltsam, es ist/sollte eine geerbte font-size:0; aus dem Körper in die reset-min.css also nicht sicher, warum dies funktioniert.)

    • gut das funktioniert. ich HASSE es dachte! ist das das beste was werde ich bekommen? interstingly Einstellung font-size:1 oder font-size:1000 ergibt die gleiche Größe Lücke
    • zu sehen, dass die Lücke verschwinden, ist schon eine Erleichterung. und eine noch GRÖßERE Entlastung zu sehen, die Lücke auf meine eigentliche Seite verschwindet. ich bin sehr neugierig, wie andere Lösungen aber so für jetzt lasse ich die Frage unbeantwortet
    • oh, und ich wusste nicht, dass ich hasse deine Antwort - ich meinte nur - Sie wissen schon 🙂 ich Las mein Kommentar, und ich dachte, ich Klang ein wenig undankbar!
    • Keine Sorge - ich weiß, was du meinst. 🙂
    InformationsquelleAutor Peter Boughton
  4. 2

    In strict doctypes, Bild wird ein inline-element, und verhält sich wie text. Daher müssen Sie ändern Ihre vertical-align Eigenschaft, oder ändern Sie die display-Eigenschaft auf display: block oder display:inline-block

    InformationsquelleAutor Marco Luglio
  5. 0

    Versuchen, um auszuschließen, gemeinsame Fehler, die ich aus dem code-Gültigkeitsprüfung durch die Festsetzung nicht weniger als 8 Fehler bei der Validierung.

    In der Regel, wenn ein browser kann nicht analysieren das Dokument im DOCTYPE angegeben, Ergebnisse werden nicht angegeben.

    Es immer noch nicht funktioniert, wohlgemerkt, 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>
    • vielen Dank - auch wenn es nicht funktioniert. sollte ich mich in die Gewohnheit zu tun, Dinge wie, dass
    • dies ist nicht ein häufiges Problem? die meisten Recherchen für dieses Problem einfach Ertrag der Beratung über die Einstellung der padding auf 0 überall - was ich getan habe
    InformationsquelleAutor Allain Lalonde
  6. 0

    Display:inline-block Lösung, die definitiv nicht für mich arbeiten.

    Den vertical-align:bottom-Lösung hat zwar funktioniert, aber mit einer Einschränkung: je nach situation, es gab Bilder, die hatte ich statt set für vertical-align:top

    InformationsquelleAutor oyvey
  7. -1

    Wechsel zu lockere standards anstelle von strengen arbeitete für mich... hielt die IE-Formatierungen, die ich benötigte, aber beseitigt das odd-Bild-Abstände in Firefox und Chrome.

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

    Verwendet die Zeile:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    InformationsquelleAutor pcamis
Schreibe einen Kommentar