Ich habe ein merkwürdiges Verhalten in Chrome / FF / IE bemerkt und mich gefragt, ob jemand wüsste, warum HTML / CSS auf diese Weise gerendert wird.
Wenn Sie ein absolut positioniertes untergeordnetes Element haben, dessen Elternanzeige auf Inline-Block gesetzt ist, wird jedes Leerzeichen im untergeordneten Element als Zeilenumbruch behandelt. Dies gilt auch, wenn das untergeordnete Element auf contenteditable="true" festgelegt ist (wenn Sie versuchen, Leerzeichen einzugeben, wird ein Zeilenumbruch verursacht).
Hier ist eine Geige des Phänomens: Ссылка
HTML:
%Vor%CSS:
%Vor%Wenn Sie entweder die Tatsache entfernen, dass es absolut positioniert ist, oder die Tatsache, dass das Elternelement Inline-Block ist, ist das Problem behoben.
Wenn Sie das untergeordnete div-Objekt ( #content ) absolut positionieren, entfernen Sie es aus dem Dokumentfluss. Daher wird das übergeordnete div-Element ( #container ) minimiert, da es sich so verhält, als ob es nicht mehr vorhanden wäre enthält alles, im Wesentlichen Null Breite oder Höhe. Dies führt dazu, dass das absolut positionierte Kind-Div ( #content ) zusammenbricht. Sie können ein ähnliches Ergebnis sehen, wenn Sie Ihre Regeln entfernen und dem Elternelement eine width:0 -Regel geben.