Problema CSS su iPad con bordo tabella

Question

Ho un problema CSS quando la pagina html è visualizzata su iPad. Tutto funziona bene con altri browser. Il problema è che ottengo un piccolo spazio tra le celle nei miei tavoli come potete vedere nell'immagine: http://oi53.tinypic.com/2vl0as9.jpg

Se zoomo sulla pagina massima sulla linea tra le celle, scompare .. Quindi deve essere qualche tipo di bug quando la pagina viene renderizzata. Posso aggirare questo in qualche modo? Questo è il mio tavolo e CSS:

<table class="smallTable" cellpadding=0 cellspacing=0> 
    <tr> 
     <td class="td1"></td> 
     <td class="td2"></td> 
    </tr> 
    <tr> 
     <td class="td1"></td> 
     <td class="td2"></td> 
    </tr> 
</table> 

CSS:

.smallTable 
{ 
    margin: 20px auto 40px auto; 
    border-spacing: 0; 
} 

.smallTable td 
{ 
    margin: 0; 
} 

.smallTable td.td1 
{ 
    background: url(../images/table1.png); 
} 

.smallTable td.td2 
{ 
    background: url(../images/table2.png); 
} 

Answer 1

Si tratta di una pratica generale di gestire stili di tabella sul web, e che dovrebbe risolvere il problema:

table { border-collapse: collapse; } 

E puoi rimuovere le impostazioni dei margini per le celle della tabella, esse non influiscono su nulla.

Answer 2

Sono stato in grado di risolvere il problema inserendo questo meta tag nella testa html quando viene rilevato un iDevice (iPod, iPad, iPhone) nella richiesta.

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

Spero che sia d'aiuto.

Answer 3

Eureka! Ho trovato una soluzione che ha funzionato per me.

ho avuto uno sfondo grigio chiaro e questo sembrava essere il colore che è stato rivelato come i bordi intorno mie tabelle che erano un colore più scuro.

Per risolvere il problema è necessario posizionare tutti i tag che sono influenzati dai confini stessi rivelano in un'altra tabella dello stesso colore.

Questo ha funzionato dopo aver provato così tante cose. Spero che questo aiuti

Answer 4

soluzione Zheileman funzionato per me e ora i miei schede con immagine sfondi CSS aspetto corretto su iPad. Visualizza le schede del menu in alto su http://www.meishapersonaltrainer.com su un iPad per un esempio della correzione in azione.

mio PHP che esegue la rilevazione e aggiunge la META assomiglia a questo

if (isset($_SERVER['HTTP_USER_AGENT'])) 
{ 
    $ua = strtolower($_SERVER['HTTP_USER_AGENT']); 
    if (strpos($ua, 'ipad') !== false || strpos($ua, 'ipod') !== false ||strpos($ua, 'iphone') !== false) 
    { 
     print '<meta content="width=device-width; initial-scale=1.0;" name="viewport" />'; 
    } 
} 

Answer 5

ho appena sbattuto la testa contro questo bug per mezza giornata durante il tentativo di fare un formato HTML e-mail.

iPad sono un bug (gasp!) Durante la visualizzazione di tabelle in un non scala 1: 1. Ciò è particolarmente evidente se i tag TD della tua tabella hanno uno sfondo scuro e il genitore della TABLE ha un colore chiaro. Rowspans e colspans amplificano il problema.

Inizialmente pensavo che il problema fosse che l'iPad stava introducendo un confine.
Il vero problema è che i programmatori di Apple non hanno deciso se stavano andando a arrotondare uniformemente le frazioni di un pixel verso l'alto o verso il basso durante il ridimensionamento.

Quindi, alcuni tag TD sembrano avere un bordo quando la bilancia non è al 100%. Quando in realtà è solo lo sfondo chiaro a mostrare.

La soluzione è per avvolgere la tabella in un'altra tabella con lo stesso sfondo scuro.

Benvenuti al web-design del 1998. Sento che mp3.com è di gran moda. Mi comprerò alcuni dolcetti per cani per corrispondenza da pets.com.

Grazie iPad.

Answer 6

Ho risolto questo in un modo strano.

Per prima cosa ho aggiunto un <div> all'interno di ogni cella che stava riscontrando questo problema, se c'è del contenuto nella cella assicurati che lo lo segua e non avvolga il contenuto. Ho quindi applicato la classe ios-table-fix allo e ios-table a qualsiasi cella della tabella (<td>).

Quindi ho scritto alcuni CSS all'interno di query multimediali che hanno come obiettivo la risoluzione dello schermo dell'iPad. Il primo ho aggiunto quanto segue al ios-table:

overflow: hidden; 
position: relative; 

Poi ho aggiunto quanto segue alla ios-table-fix:

bottom: -1px; 
left: -1px; 
position: absolute; 
right: -1px; 
top: -1px; 
z-index: 1; 

si sta andando a voler applicare position: relative; e z-index: 2; a qualsiasi contenuto all'interno della tabella cellule, altrimenti scompariranno.

Ciò disegna efficacemente un nuovo sfondo per la cella della tabella che supera il problema del bordo senza modificare la dimensione della cella della tabella. Poiché si tratta solo di un problema con l'iPad, possiamo usare i CSS nel tag <head> per evitare di influenzare tutto.

L'ho provato solo brevemente ma sembra funzionare senza causare problemi altrove.