iOS 10 Mail-HTML reagiert nicht korrekt
Ich erstelle einen Newsletter und ich habe seltsames Verhalten entdeckt.
Ich habe eine Tabelle mit 2 innen und ich will, dass sie ein Block und 100% Breite sind, aber folgendes passiert:
es bricht auch einige andere Teile der Post. Ich habe schon so viel probiert ... jedes Bildfenster, maximale Breite, minimale Breite, ich habe keine Ahnung was ich tun soll ...
Ich habe überprüft, dass Medienabfragen funktionieren
Gibt es spezielle Hacks, die ich brauche?
%Vor%Das aktuelle Problem:
iOS 10 akzeptiert nicht "display: block;" auf "td" -Tags
2 Antworten
Ich kann nicht genau sagen, wo das Problem aufgetreten ist, kann aber eine Vielzahl von Duplikaten im oben angegebenen Code erkennen. Es könnte eine Kollision, ein spezifisches Problem oder iOS Mail geben, die nur verwirrend werden und eine wichtige CSS-Regel herauswerfen.
Hier ist ein vereinfachtes Beispiel einer 600px breiten E-Mail mit zwei geraden Spalten, die gestapelt werden. Ich habe most des CSS (nicht relevant für dieses Problem) und einen Großteil des umgebenden HTML nicht berücksichtigt. Ich habe auch das verwaiste <!--[if !mso]><!--><!--<![endif]--> am Ende entfernt.
CSS in <head> :
Und HTML:
%Vor% Diese Technik verwendet den hybriden Ansatz, der mit max-width und min-width starre Basislinien vorgibt (was einige Bewegungen erlaubt) und eine feste, breite Breite für Outlook vorgibt, die ohnehin an den Desktop gefesselt ist (daher <!--[if !mso]> sachen) ). Medienabfragen können die E-Mail in Clients, die sie unterstützen, wie iOS Mail, weiter verbessern.
Bearbeiten: Zusätzlicher Doctype und Metainfo:
%Vor% Verwenden Sie [class="classname"] für Tabelle und Tabelle td.
Tatsächlich funktioniert das auch, wenn Sie nur td ;
Alternative Methode zur Medienabfrage
Ich nehme eine Art von Transformation (wie z. B. MS Word ML) für Ihre ursprünglichen Stile in der Kopfzeile an.
Eine alternative Methode, die ziemlich kugelsicher für fast (wenn nicht) alle ist, heißt Fab Four Technique sie verlässt sich nicht auf Medienabfragen, was bedeutet, dass Sie Ihr adaptives Layout in Clients bekommen unterstütze es nicht; sowie; Outlook und Google Mail
Tags und Links html css html-email newsletter