2016-05-16 5 views
2

Was ich habe ist ein Element, dessen Styling gebrochen ist: die Breite und Höhe sind ziemlich falsch. Das Problem ist, dass für dieses Element kein width oder height angegeben ist: Wenn Sie es in Chrome Dev Tools betrachten, sehen Sie, dass diese Eigenschaften ausgegraut sind, wie unten zu sehen, da sie nur vom Browser basierend auf anderen berechnet werden Information.Welche Faktoren beeinflussen die Berechnung der Breite und Höhe eines Elements?

enter image description here

Und diffs zwischen verpflichtet zu vergleichen, kann ich keine Styling-Regeln sehen waren auf dieses Element geändert. Was bedeutet etwas um das Element wurde geändert: eines seiner vielen Kinder oder ein Elternteil.

Was ich gerne wissen würde ist, wie können Sie feststellen, welche Elemente oder Regeln diese Berechnung beeinflussen, um es zu debuggen?

Ich hoffe, es Art einer Checkliste ist, so etwas wie „Check Breite Eigenschaft für alle untergeordneten Elemente. Wenn es gesetzt ist, dann ..., sonst auf mögliche JavaScript zu beeinflussen suchen weitergehen ...“

Edit: Die Frage kann als „“? Welche Faktoren Browsern überprüfen, in welcher Reihenfolge und mit welcher Priorität, eines Elements Dimensionen bestimmen“umformuliert werden

+1

Ohne den Code zu sehen, viele Dinge beeinflussen Breite und Höhe. Der Inhalt ist wahrscheinlich der größte, ebenso wie die Breite der Eltern oder angrenzender Elemente, wenn sie floaten usw. – n8wrl

+1

Diese Frage sollte nicht den Code sehen lassen. Es ist im Wesentlichen das: "Welche Faktoren überprüfen Browser in welcher Reihenfolge und mit welcher Priorität, um die Dimensionen eines Elements zu bestimmen?" Das ist Code-agnostisch. – Aerovistae

Antwort

2

diese Spezifikationen Siehe: https://www.w3.org/TR/CSS2/visudet.html#propdef-height

Es gibt ein paar verschiedene Arten von Höhenberechnungen, wie o in Abschnitt 10.6. Sehen Sie sich die Unterabschnitte an, um zu bestimmen, wie die Höhe Ihres Elements berechnet wird.

(Es gibt eine Warnung von einigen der Abschnitte auf dieser Seite von anderen Spezifikationen aktualisiert werden, aber eine schnelle Überprüfung des Updates scheint keine Änderungen in der Höhe. Miteinschließt)

Verwandte Themen