2015-09-25 16 views
7

ich auf dieser Webseite arbeite: http://dev.mailagent.biz/cms/NEWSSafari 9 (in iOS9) ignoriert CSS-Einstellungen

Es reagiert HTML, die in allen Browsern, alle Fenstergrößen gut funktioniert. Es funktionierte auch auf iPhones gut, bis iOS9 wurde. Jetzt ist die ganze Seite kaputt. Zusätzliche Ränder (ich vermute) wurden hinzugefügt, was bedeutet, dass alle Felder viel Leerraum haben. Unten ist ein Screenshot von meinem iPad. iPad screenshot

stelle ich das Ansichtsfenster als

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 

ich die Ränder auf 0 versucht, Einstellung und auch auf negative Werte, aber die Boxen nicht bewegen. Ich habe auch versucht, alle Leerzeichen zwischen Div-Tags zu entfernen, ohne Änderung.

ich eine reaktions CSS für alle Browser verwenden: dev.mailagent.biz/cms/css/main_responsive.css Dann diese eine speziell für iOS9 Befestigung: http://dev.mailagent.biz/cms/css/iOS9.css

Allerdings sind die meisten der Arten noch ignoriert insbesondere mit Margen. Z.B. Das iOS9-Stylesheet sollte die gesamte Site nach links ausrichten (.CenteredWrapper hat margin: 0 not margin: auto). Ich weiß, dass die iOS9.css für iPhones/iPads, wie z. Einige Ränder und Farben wurden im Menü oben im Vergleich zur Desktop-Version erfolgreich geändert.

Hat jemand eine Idee was los ist? Wie kann ich Safari sagen, dass es aufhören soll, clever zu sein? Oder wie soll ich mein Markup ändern?

+0

es in Safari Schauen Sie sich auf einem Computer als auch. Sieht dort gleich aus und ist wahrscheinlich leichter zu debuggen! –

+0

Ich sehe in Safari viele "Ungültige CSS-Eigenschaftsdeklarationen" Warnungen, die alle auf * Eigenschaftsselektoren in zwei Stylesheets bezogen sind. Ich weiß nicht, ob das etwas damit zu tun hat. –

+0

ja, seit Desktop-Safari auf 9.0 aktualisiert hat es das gleiche Problem. Es gibt definitiv ein Problem mit der CSS-Validierung wie in der Antwort unten. Vielen Dank! – Elendurwen

Antwort

2

Linie 281 (oder 98) in main_responsive scheint der Täter zu sein:

.content ul, .content ol, :not(.content ul.slideshowUl) { margin: 0 0 10px 30px;} 

ich, dass in dem Safari-Inspektoren kommentiert und die ganze Seite ging wieder normal.

+0

danke und du hast recht, denkst du, die neue Safari mag die Aussage nicht einfach nicht? – Elendurwen

+0

Eigentlich scheint mit diesem Komma in der Anweisung der Selektor: not, ALLES auf der Seite auszuwählen, die nicht über die Klasse ".content ul.slideshowUL" verfügt. Mit anderen Worten, nicht die korrekte Syntax für das, was ich zu erreichen versuche. –

+0

Aber das erklärt nicht, warum Safari das einzige ist, das das Problem zeigt! –

4

Versuchen das Hinzufügen einer Schrumpf-to-fit zu Ihrem Ansichtsfenster Tag

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> 
Verwandte Themen