Sehr dünne weiße Grenze zwischen Zelle einer Tabelle nur auf dem iPad

Question

Diese nur auf iPad Retina passieren und nicht Retina iOS 5 und 6.

Auch wenn ich versuche, auf einem Tisch keine Grenze zu haben, gibt es eine dünne weiße Grenze das erscheint.

Sie können ein Beispiel für das Problem bei http://codepen.io/anon/pen/Kcexq sehen.

Ein iPad oder der Simulator wird benötigt, um die PB zu sehen.

Schauen Sie genau auf die grüne Lasche eine weiße Grenze ist:

Für das Protokoll die gleiche Sache mit Display als Tisch-Zelle passieren.

Answer 1

Die dünne Grenze scheint durch die display:table-row und/oder display:table-cell Eigenschaft verursacht werden.

Hinweis: Es ist eigentlich keine weiße Grenze, es ist eine Art rgba:(0,0,0,alpha); Sie können das sehen, wenn Sie die Hintergrundfarbe hinter der Tabelle ändern.

von td Stil display:inline-block; oder tr Stil display:block; ändert, wird es von der linken & rechten Rand der Zellen zu befreien, aber die untere Grenze Stills steht.

In der Tat, zwingende border-color mit einem rgba(0,0,0,0); auf etwas (Tisch, tr, td ...) ändert sich nichts, auch nicht border-collapse:collapse; (wie Morpheus vorgeschlagen). Entweder der berechnete Stil zeigt keine Grenze berechnet, aber immer noch, es ist hier ...

Hinweis: iOS scheint auch die Grenzen abhängig von der Zoom-Skala des Benutzers zu berechnen (getestet auf einem echten iPad). Hier

ist der Standard-Tabellenstil für Safari iOS:

table { 
    display: table; 
    border-collapse: separate; 
    border-spacing: 2px; 
    border-color: gray; 
} 

tbody { 
    display: table-row-group; 
    vertical-align: middle; 
    border-color: inherit; 
} 

tr { 
    display: table-row; 
    vertical-align: inherit; 
    border-color: inherit; 
} 

td, th { 
    display: table-cell; 
    vertical-align: inherit; 
} 

Ich bin immer noch für eine versteckte CSS suchen, der diese Alpha Grenze hinzufügen könnte, und wird meine Antwort aktualisieren, wenn ich etwas finden.

Answer 2

Es ist wegen des Hintergrundes. Sie sollten Bild mit 1px Breite und fester Höhe schneiden und es als Hintergrund setzen.

td 
    { 
    background: url('your_url/green_bg.png') repeat-x; 
    } 

Answer 3

Dieses Problem hat mit Browsern Rendering Tabellenzellen mit einer sauberen 1-Pixel-Grenze bewusst zu machen und das Verhalten sichtbar wird am häufigsten mit einer Hintergrundfarbe. Die Lösung besteht darin, den problematischen Bereich in einer eigenen Tabelle zu umbrechen und zu verschachteln und die Hintergrundfarbe der Tabelle und nicht die Hintergrundfarbe der Zellen festzulegen.

Die Diskussion hier ist sehr nützlich, auf dieser https://www.campaignmonitor.com/blog/email-marketing/2011/10/iphone-fail-the-trouble-with-table-borders-and-html-email/