Warum rendert Safari das mehrspaltige CSS-Layout anders?
Ich baue eine Website und teste es hauptsächlich in Chrome, wobei ich ab und zu überprüfe, ob es immer noch in Firefox funktioniert.
>Da Chrome und Safari auf WebKit laufen, würden sie die Website identisch darstellen. Dies ist jedoch nicht der Fall.
Ich habe die Site auf Safari überprüft und festgestellt, dass meine Menüleiste eine ungeordnete Liste mit column-count (sowohl -moz- als auch -webkit- mit dem gleichen Wert) verwendet und festgestellt hat, dass ein Unterschied besteht das Füllen der Spalten.
Chrome scheint die Spalten gleichmäßig zu füllen, während Safari nur die Spalten einzeln füllt. Die Bilder unten veranschaulichen dies.
Chrome rendert:
Safari rendert:
Mir gefällt die Chrome-Methode zum Rendern der Spalten sehr, also habe ich mich gefragt, ob es eine Möglichkeit gibt, Safari dazu zu zwingen, die Site auf diese Weise zu rendern, ohne das html -Layout überhaupt zu verändern.
Hinweise: Firefox macht dasselbe wie Chrome und benötigt keine Korrektur. Ich entwickle nicht für IE, also weiß ich nicht, wie das rendert.
3 Antworten
Ich hatte das gleiche Problem, aber min-height hat nicht funktioniert. Ich hatte die Spaltenanzahl in einem Bootstrap .col-md-12-Container eingestellt und das war das Problem für mich.
Ich habe ein Kind div mit der erforderlichen Klasse hinzugefügt und es hat perfekt funktioniert
Ich hatte ein ähnliches Problem mit dem Spalteninhalt, der auf Safari mit einer Höhe von 1px angezeigt wird. Ich habe "min-height: 100%" zum Element hinzugefügt und alles sieht gut aus. Ich habe auch "Höhe: 100%" auf dem Körper / html und enthält Elemente, vorausgesetzt, das ist, wie ich es richtig funktioniert.
Tags und Links css google-chrome css3 safari css-multicolumn-layout