Flexbox funktioniert in Safari nicht richtig

html.de-Forum HTML, XHTML & CSS
1

[SIZE=5]H[/SIZE]allo,

bei meinem Code funktioniert das Flexbox Model nicht wie es soll. Komischerweise nur in Safari. In Chrome, Firefox und Internet Explorer geht alles.

Das Problem liegt wohl irgendwie bei der flex-direction: row; Safari setzt die beiden Elemente einfach nicht nebeneinander. Wenn es so aussehen würde wie bei allen anderen Browsern wäre ich zufrieden.

Gibt es irgendetwas dass man beim Safari anders machen muss, dass es funktioniert?
Mit -webkit- funktioniert es genauso wenig.

Hier mal der code:
HTML: https://dl.dropboxusercontent.com/u/…de/safari.html
CSS: https://dl.dropboxusercontent.com/u/…ode/safari.css

Es wäre super wenn jemand eine Idee hätte.
Vielen Dank!

2

bei w3c habe ich mich mal etwas erkundigt und gesehen, das selbst bei denen flex-direction:row nicht funktioniert bei Safari.

ihr könnt es gerne mal ausprobieren::
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex-direction

nur bei Safari funktioniert es nicht. Heißt das das Safari das nicht unterstützt? Wie machen das dann alle anderen Websites. gibt es ein workaround?

3

Von welcher Safari-Version sprichst Du?

4

eigentlich alle.

hab nochmal neu angefangen, jetzt gehts, aber frag nicht warum. ist im code oben was falsch?

5

„alle“ ist sehr weit umfassend. Es gibt aktuell Mobilgeräte mit Safari 4 bis 6, die 7 ist imho auch bald da. Für Windows geht es nicht mal so weit.

An deinem Code oben fällt mir lediglich auf, dass Du nicht die von HTML5 ermöglichten neuen HTML-Elemente wie footer oder header nutzt.

6

windows: safari 5.1.7
mac: safari 6.2; 7; 8

ist meine erste html5 site. was haben die neuen HTML-Elemente für unterschiede zu div?

7

Sie haben eine semantische Bedeutung im Gegensatz zu div.

Gruss
Elroy