Rahmen um Tabellen in HTML-E-Mails auf dem iPad und iPhone

Ich habe ein pixel-Grenze zeigt zwischen den Zeilen, wenn dabei E-Mail-Prüfung. iPhone und iPad nur.
Ich habe versucht:

* {
margin:0;
padding:0;

}

Habe ich auch schon versucht:
dies macht die Grenze blau statt weiß, aber ich möchte die Grenze komplett entfernt?

InformationsquelleAutor Thurston | 2011-04-12
  1. 8

    Dies passiert anscheinend, wenn Sie angewendet haben, Hintergrundfarben oder Bilder zu einzelnen Zellen der Tabelle. Ich entfernte einzelne bgcolor und background-color Referenzen aus den Tabellen mit mystery Grenzen, und das problem ging Weg!

    Quelle: iPhone fail: das Problem mit Der Tabelle Grenzen und HTML-E-Mails (Kampagnen-Monitor)

    • Über Foundation für E-Mail 2, die Zeile erscheint, wenn ich einen center-tag um meine button-tag.
    • Das entfernen der Farben aus den Zellen löst nicht das problem, wenn Sie brauchen Zellen mit unterschiedlichen Hintergrundfarben werden, und wenn Sie befolgen Sie die Ratschläge auf dieser Seite, die gesamte Tabelle in eine farbige Zelle dann am Ende mit einem dünnen Rahmen um die ganze Tabelle in die Zelle, so dass es einfach bewegt, wo das problem erscheint, es nicht es zu lösen.
    InformationsquelleAutor Matt Stein
  2. 2

    Versuchen Sie dies:

    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

    Dies wird verhindern, dass Benutzer Zoomen. Ich fand diese funktioniert auch:

    <meta content='width=device-width; initial-scale=1.0;' name='viewport' />

    Aber, es sieht wieder gebrochen, wenn Sie die Ansicht vergrößern. Initial load funktioniert, also ich war zufrieden mit der zweiten option.

    • In meinem Fall die Linie erscheint schon ohne Zoomen.
    InformationsquelleAutor pondmouse
  3. 1

    versuchen Sie, hinzufügen:

    border-collapse:collapse;

    sehen, was passiert,

    • Hi. Ich habe nie dieses problem behoben hatte und zum erstellen der E-Mail aus dem nichts in das Ende macht alles passen in einen td. Würde noch gerne wissen, wie das problem zu beheben für die zukünftige Verwendung
    • Hey Thurston, ich glaube, ich fand die Lösung auf Campaign Monitor Webseite. Siehe meine Antwort oben.
    • Macht keinen Unterschied.
    InformationsquelleAutor Ian Wood
  4. 1

    Es ist ein Problem in iOS, für mehr info siehe: http://www.campaignmonitor.com/blog/post/3585/iphone-fail-the-trouble-with-table-borders-and-html-email

    Im Grunde, es hat zu tun mit verschiedenen hintergrund-Farben für die Zellen der Tabelle. Zitat:

    "Um zu verhindern, dass diese Grenzen aus, die auf dem iPhone, können Sie versuchen:

    • Entfernen von Hintergrundfarben oder Bilder von einzelnen Tabellen-Zeilen und-Zellen, und/oder;
    • Schachteln, die problematische Tabelle in eine neue Tabelle mit der Hintergrundfarbe übereinstimmt, die von der inneren Tabelle."
    • Entfernen von Farben aus den Zellen hilft nicht, wenn Sie brauchen farbige Zellen, und setzen Sie die problematische Tabelle innerhalb einer Zelle einer neuen Tabelle nicht zu helfen, wie Sie am Ende mit einer dünnen Linie um die Zelle (nur bemerkbar, wenn Sie nicht füllen Sie jede Zelle, die problematische Tabelle).
    InformationsquelleAutor daan_tallguys
  5. 1

    Ich "lösen" das mit box-shadow. Ich weiß, es ist nicht schön, aber hey, wir reden über Tabellen hier 🙂

    Einfach einen box-shadow, um alle TD mit der übergeordneten Knoten Farbe zeigt sich auf dem iPad. Sie können sogar tun dies nur für das iPad innerhalb einer iPad-spezifischen media query.

    • Diese tatsächlich geholfen hat mich auf den richtigen Weg, aber es dauerte eine Menge von Versuch und Irrtum, um herauszufinden, die richtige syntax/Ort/Abmessungen um dies zu tun, nicht zuletzt von denen war, weil ich wollte, es zu tun inline in die HTML-Tabelle, nicht CSS, für den Versand in ein geschlossenes E-Mail-so habe ich meine eigene Antwort mit dem HTML enthalten. Danke!!!
    InformationsquelleAutor Remi Grumeau
  6. 0
    border: 0;

    sollte es tun, einfach und schön,

    • Dasselbe leider. Ich habe versucht, indem Sie ihn in den html-Kopf und auch als inline-Stil auf den jeweiligen Tisch
    • hows über die Deklaration border="0" in der Tabelle/td-tags?
    • Hi, danke an alle für die Kommentare so weit - ich habe einfach versucht: td width="40" bgcolor="#006BAC" border="0">
    • aber das oben hat nicht funktioniert
    InformationsquelleAutor Xand94
  7. 0

    Bilder? hinzufügen style="display:block;" Bilder

    InformationsquelleAutor joetsuihk
  8. 0

    Beim ändern der Hintergrundfarbe der Tabelle mit gearbeitet, für die meisten Teile von meinem layout, für einen Abschnitt, das war nicht eine option. Dort habe ich verwendet, die relative Positionierung und Links ein Wert von " -1 " (auf der rechten Seite der Zelle). Ich war überrascht zu sehen, Positionierung unterstützt (zumindest in der iOS-6.1). Ich nehme an, eine negative Marge gearbeitet haben würde, auch.

    InformationsquelleAutor Jish
  9. 0

    In meinem Fall wollte ich eine Tabelle, die sah aus wie überlappende Felder, wo das Feld hintergrund, endete vor dem Ende der Zeile, und die Vordergrund-box begann eingerückt vom Anfang der Zeile. Nach dem Lesen jeder web-site, Q/A, die hier vorgeschlagen werden, und versuchen, jede andere alternative, was schließlich arbeitete, war die Angabe einer box-shadow, Z. B.:

    HTML:

    <table style="margin-right: auto; margin-left: auto; width: 100%;" cellspacing="0" cellpadding="3">
  <tbody>
    <tr>
      <td colspan="4" style="width: 90%; background-color: navy;">
        <span style="color: #ffffff;">Background Box Line 1</span>
      </td>
      <td style="width: 10%;">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td style="background-color: navy; width: 25%; box-shadow: 0px -1px 0px navy;">
        <span style="color: #ffffff;">BG Box Line 2</span>
      </td>
      <td colspan="4" rowspan="2" style="background-color: red; width: 75%;">
        Foreground Box Line 1<br>
        Foreground Box Line 2
      </td>
    </tr>
    <tr>
      <td>
        &nbsp;
      </td>
    </tr>
  </tbody>
</table>

    Die Linie, die ich hatte, um loszuwerden, war eine dünne horizontale gap-Linie zwischen den 2 "hintergrund" navy Zellen, die auf iPhones und der box-shadow: 0px -1px 0px navy; lassen Sie mich setzen Sie eine dünne navy Linie über die unteren navy Zelle und so ausgefüllt, was anders war, die Lücke zwischen den top-und bottom-navy-Zellen.

    InformationsquelleAutor Ed Morton
Schreibe einen Kommentar