molto sottile bordo bianco tra cella di una tabella unica su iPad

Question

Questo avviene solo su iPad retina e non retina iOS 5 e 6.

anche se cerco di non avere bordo su un tavolo c'è un sottile bordo bianco che appaiono.

È possibile visualizzare un esempio del problema su http://codepen.io/anon/pen/Kcexq.

Un iPad o il simulatore è necessario per visualizzare il pb.

guardare da vicino la linguetta verde c'è un bordo bianco:

Per la cronaca accada la stessa cosa con display table-cell.

Answer 1

Il bordo sottile che sembra sembra essere causato dalla proprietà display:table-row e/o display:table-cell.

Nota: in realtà non è un bordo bianco, è una specie di rgba:(0,0,0,alpha); lo puoi vedere se cambi il colore dello sfondo dietro al tavolo.

Cambiando td stile display:inline-block;, o tr stile display:block;, si libera del & destra bordo sinistro delle celle, ma gli alambicchi bordo inferiore stand.

In realtà, ignorando border-color con un rgba(0,0,0,0); su qualsiasi cosa (tavolo, tr, td ...) non cambia nulla, neppure border-collapse:collapse; (come suggerito Morpheus). Sia lo stile calcolata non mostra alcun confine calcolato, ma ancora, è qui ...

Nota: iOS sembra anche calcolare i confini a seconda scala di zoom per l'utente (testato su un vero e proprio iPad).

Qui è lo stile tabella di default per 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; 
} 

Sto ancora cercando un CSS nascosto che potrebbe aggiungere quel confine alpha, e aggiornerà la mia risposta se trovo qualcosa.

Answer 2

È a causa dello sfondo. Dovresti tagliare l'immagine con 1px di larghezza e altezza fissa e metterla come sfondo.

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

Answer 3

Questo problema ha a che fare con i browser rendendo volutamente celle della tabella con un bordo di 1 pixel pulito e il comportamento diventa visibile il più delle volte con un colore di sfondo. La soluzione è di avvolgere/nidificare l'area problematica nella propria tabella e impostare il colore di sfondo della tabella, anziché il colore di sfondo delle celle.

La discussione qui è molto utile su questo https://www.campaignmonitor.com/blog/email-marketing/2011/10/iphone-fail-the-trouble-with-table-borders-and-html-email/