Diese Frage hat hier schon eine Antwort:
Ich bin geneigt zu denken, dass dies ein Bug in Chrome ist (warum würde ein Stil auf einem Kindelement den Eltern beeinflussen?), aber es könnte etwas anderes passieren, das ich nicht verstehe.
Die unten stehende Liste enthält 1 Element, das in Firefox und IE10 nummeriert ist (obwohl es im IE falsch positioniert ist). In Chrome ist die Nummer jedoch vollständig ausgeblendet.
Was ist los / ist das ein Fehler / kann dies umgangen werden?
Nun, das ist eine Art Hack, aber es funktioniert. Das Hinzufügen eines Pseudo :before -Elements bringt den Listenstil zurück, da der li jetzt einen Inhalt hat. Bringe das div nach oben zurück und es sieht so aus, als ob sich nichts geändert hat.
CSS
%Vor%Demo
Dies ist kein Bug, sondern eher ein Unterschied darin, wie verschiedene Browser-Engines das CSS rendern. (Blink vs Trident vs Gecko vs WebKit etc)
Technisch gesehen ist das Chrome-Display korrekt, weil es alles außerhalb des div wie mit overflow: hidden; angegeben versteckt.
Wenn Sie den Chrome Inspector verwenden, können Sie sehen, wo sich die Kanten der Elemente befinden und die Nummer außerhalb dieses Bereichs liegt.
Am besten wäre es, ein zusätzliches CSS-Element zu setzen, um das Hauptelement div zu überschreiben.
Definieren Sie Selektoren für diese Elemente.
Ihr geht zu Problemen, wenn Sie nur globale Tags verwenden: <li> <div> , besonders seit Ihrer Verschachtelung hier.
zB: <li class="dothis"> <div class="thisdivdoes"> ...
Nachdem Sie das getan haben, wäre es einfacher, overflow:hidden; wo und nicht wo zu unterscheiden.
Da dein Tag innerhalb deines <li> liegt, definiere, was du individuell machen willst, da du das machen willst, sonst siehst du, dass sie sich gegenseitig als Erfahrung erben.
Überprüfen Sie auch Ihre Doctype in HTML5 Ich denke, es ist nicht gültig, während es streng sein kann.
Tags und Links html css google-chrome firefox