Etwas verursacht dieses CSS zu brechen

Ich habe eine statische Website basierend auf einem Thema. Das CSS wurde nicht berührt, aber etwas hat dazu geführt, dass es kürzlich kaputt gegangen ist. Ich war etwas verwirrt, da ich keine Änderungen vorgenommen hatte, also habe ich die Beispielsite überprüft und sie ist dort auch defekt. Ich habe mit dem Autor nachgeschaut, keine neuen Änderungen, aber sie haben auch bemerkt, dass es jetzt für sie kaputt ist.Etwas verursacht dieses CSS zu brechen

Also das Problem. Bei Safari, IE, Chrome und Edge gibt es beim Laden der Seite einen merkwürdigen "Pop-in (?)" - Header. Alle Elemente werden sofort nach unten verschoben. Firefox funktioniert ordnungsgemäß.

Es ist am einfachsten, auf dieser Seite https://mmistakes.github.io/so-simple-theme/theme-setup/ zu sehen, aber wirkt sich auf alle Seiten in dem Thema aus.

Ich bin kein CSS-Assistent, aber nach der Fehlerbehebung für einen Tag habe ich festgestellt, dass es möglicherweise mit diesem CSS-Selektor verbunden ist? Ich könnte völlig falsch liegen.

Zweite Frage (weniger wichtig) ist ich frage mich, was könnte dazu führen, dass etwas nach der Tat zu brechen. Ich nehme an, dass eine der JavaScript-Bibliotheken verknüpft ist?

Vielen Dank!

Quelle

2016-12-08 user1661890

Ich habe gerade diese Seite in Chrome und Firefox angeschaut und beide sahen gut aus. Könnten Sie das Problem genauer beschreiben? – andi

Können Sie einen kommentierten Screenshot des Problems zur Verfügung stellen? Es ist vielleicht nicht sofort allen klar, was Sie mit "Pop-in" meinen. – Serlite

Wenn der Autor auch betroffen ist, werden sie das schnell finden und beheben. – LGSon

Sie sind richtig, der Grund, warum Ihr Inhalt, sagen "Pop-in" oder einfach abrupt nach unten ist, weil der Inhalt nur erscheint, wenn die Seite geladen wird.

dies Ihr CSS zu beheben initialisieren beginnen wie:

#site-nav { 
 
    height: 0; 
 
    transition: height .2s, max-height 200ms; 
 
    overflow: hidden; 
 
}

Dann in Ihrem @media für 48em haben Ihre CSS dies zu tun:

#site-nav.closed { 
 
    height: 5em; 
 
}

Dadurch wird sichergestellt, dass Ihr Inhalt tatsächlich eingefügt wird und kein abruptes Verhalten vorhanden ist.

Quelle

2016-12-08 19:32:56

Etwas verursacht dieses CSS zu brechen

Antwort

Verwandte Themen