Bei dem Versuch, eine Winkel Richtlinie zu erstellen, die die Größe seines Inhalts an die Größe des Behälters passt, habe ich über das folgende Problem gestolpert:Chrome liefert 0 für offset von benutzerdefinierten HTML-Element
Minimal HTML-Schnipsel:
Beim Lesen der Breite von my-tag, bekomme ich ein Ergebnis von 0 in Chrome, während Firefox das korrekte Ergebnis zurückgibt. In Chrome ist das Ergebnis auch korrekt, wenn ich my-tag durch div ersetze.
Dies ist der Ausdruck, den ich verwende, um die Breite zu erhalten:
document.getElementById('testWidth').offsetWidth
Soweit ich weiß, sollte my-tag ein valid custom element name sein. Gibt es noch etwas anderes, das ich falsch mache, oder ist das einfach ein Bug in Chrome?
Chrome-Version: 49.0.2623.112 m
jsfiddle für einen schnellen Test
Ich versuche, wenn das Verhalten von Chrome zu verstehen, richtig ist oder ob dies ein Fehler.
The MDN documentation sagt:
Die HTMLElement.offsetWidth read-only-Eigenschaft gibt das Layout Breite eines Elements.
Soweit ich das beurteilen kann, heißt das nicht, dass dies nur für Elemente mit Blockanzeige gilt. Und ich unterstütze mein Verständnis auch dadurch, dass Firefox das zurückgibt, was ich erwarte.
Der gleiche Unterschied im Verhalten kann auch für span Tags beobachtet werden, siehe this fiddle.
Block-Level-Elemente die Breite ihrer Eltern standardmäßig füllen, um Stil, wenn das gewünschte Ergebnis ist die tatsächliche Breite des Elements zu messen gefüllt mit Inhalt, Anzeige: Inline-Block macht den Trick. –
Sie haben Verhalten von div-Element durch Angabe von 'display: block'. Aber ein guter Punkt, wenn Sie die Elementbreite nach ihrem Inhalt messen wollen, wird 'display: inline-block' oder' float: left' auf Block-Element ausreichen. –
Ich habe der Frage etwas mehr Hintergrund hinzugefügt. Kannst du mich auf irgendeine Dokumentation verweisen, die besagt, dass "offsetWidth" nur für "block" -Elemente funktionieren soll? – ValarDohaeris