HTML Forcing img Dimensionen erfordert Block?

Question

Ich habe eine Situation, in der ich eine HTML img haben möchte, die noch nicht geladen wurde, um eine voreingestellte Höhe zu haben. Der Grund ist, dass diese Höhe in einer Berechnung verwendet wird, die ausgelöst wird, bevor das Bild vollständig geladen ist und genau bleiben muss. Ich habe versucht, die folgenden:

<div>hello<img src='http://example.com/invalid.gif' class="testimage"> there</div> 

und

.testimage { 
    height: 200px; 
    width: 200px; 
} 
​ 

in einigen CSS setzen und zumindest in Firefox 5, der zusätzliche Raum wird nicht gerendert (und seltsam, das gebrochene Bild zeigt nicht entweder, nur ein Leerzeichen). Das heißt, bis ich display: inline-block hinzufügen. In mindestens einigen anderen Browsern zeigt die Standardanzeige inline das gewünschte Ergebnis. Wird das erwartet? Wenn ja warum?

Hier ist ein jsFiddle auch: http://jsfiddle.net/uYXD4/

Answer 1

Bilder sind replaced elements:

Ein Element, dessen Inhalt außerhalb des Bereichs des CSS-Formatierungsmodells, z. B. ein Bild, ein eingebettetes Dokument oder ein Applet. Zum Beispiel wird der Inhalt des HTML-IMG-Elements oft durch das Bild ersetzt, das sein "src" -Attribut bezeichnet.

Für ersetzten Elemente, display: inline-block ist supposed to have the same exact same efffect als display: inline, die der Standard ist.

kann dies also eine mögliche Erklärung in einigen Browsern für dieses seltsame Verhalten sein *:

Sie behandeln nur vollständig geladen Bilder als Elemente ersetzt, und sonst sie als nicht-ersetzte Elemente behandeln. Das macht schließlich Sinn und der Standard verbietet das nicht ausdrücklich.Als Folge gibt es drei mögliche Szenarien:

1. ersetzt Element, Inline oder Inline-Block keine Rolle spielt, height Eigenschaft
2. Inline nicht ersetzt Element arbeitet, height Attribut has no effect
3. inline-block nicht -replaced Element, height Eigenschaft funktioniert

Loaded Bilder immer als 1. qualifizieren und gebrochen/Laden von Bildern qualifizieren können als 1. oder 2. (oder 3. wenn Sie Anzeige ein: inline-block explizit)

* Nicht sicher, ob die Dinge tatsächlich so funktionieren.

Answer 2

es sagt hier, dass die Bilder Inline Elemente sind - http://htmlhelp.com/reference/html40/special/img.html

Auf der anderen Seite hier einen Blick - Is <img> element block level or inline level?

Es sieht aus wie die <img> element ist sowohl inline als auch block. Keine strengen Regeln, die es definieren, so dass die Browser-Hersteller wahrscheinlich ihre eigenen Entscheidungen über die Standardeinstellungen treffen. So Ihre beste Wette ist, ihre Annahmen zu display: inline-block

Answer 3

zurücksetzen Warum nicht etwas verwenden wie

<img src="..." width=400 height=200> 

ich genau dasselbe zu tun und es funktioniert ganz gut. Eine weitere Option ist ...

$('.myimg').load(function() { /* ops */ }); 

obwohl ich weiß nicht, ob das das Bild in allen Browsern laden wartet oder nicht