CSS-Problem auf dem iPad mit Tabellenrand

Question

Ich habe ein CSS-Problem, wenn die HTML-Seite auf dem iPad gerendert wird. In anderen Browsern funktioniert alles gut. Das Problem ist, dass ich einen kleinen Abstand zwischen den Zellen in meinen Tabellen bekomme, wie Sie auf dem Bild sehen können: http://oi53.tinypic.com/2vl0as9.jpg

Wenn ich die Seite maximal auf die Linie zwischen den Zellen heranzoomen, verschwindet es. So muss es sein eine Art Bug, wenn die Seite gerendert wird. Kann ich das irgendwie umgehen? Das ist mein Tisch und 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

Dies ist eine allgemeine Praxis Tabellenstile auf dem Netz der Verwaltung, und das sollte das Problem beheben:

table { border-collapse: collapse; } 

Und Sie können die Randeinstellungen für Ihre Tabellenzellen entfernen, sie beeinflussen nichts.

Answer 2

Ich konnte es beheben setzen dieses Meta-Tag in den HTML-Kopf, wenn ein iDevice (iPod, iPad, iPhone) in der Anfrage erkannt wird.

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

Ich hoffe, es hilft.

Answer 3

Eureka! Ich habe eine Lösung gefunden, die für mich funktioniert hat.

Ich hatte einen hellgrauen Hintergrund und das schien die Farbe zu sein, die sich als Ränder um meine Tische herum zeigte, die eine dunklere Farbe hatten.

Um es zu beheben, müssen Sie alle Tags, die von den Grenzen betroffen sind, in einer anderen Tabelle mit der gleichen Farbe zeigen.

Dies funktionierte nach dem Versuch so viele Dinge. hoffe das hilft

Answer 4

Zeilemans Lösung funktionierte für mich und jetzt meine Tabs mit CSS-Bildhintergründen auf dem iPad richtig aussehen. Sehen Sie sich die Top-Menü-Registerkarten http://www.meishapersonaltrainer.com auf einem iPad an, um ein Beispiel für den Fix in Aktion zu erhalten.

Meine PHP, die die Erfassung und fügt die META führt wie folgt aussieht

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

ich meinen Kopf gegen diesen Fehler für einen halben Tag nur bashed bei dem Versuch, eine HTML-formatierte E-Mail zu machen.

iPad haben einen Fehler (keuchen!) Beim Betrachten von Tabellen im Maßstab 1: 1. Dies ist besonders offensichtlich, wenn die TD-Tags der Tabelle einen dunklen Hintergrund haben und die Eltern des TABLE eine helle Farbe haben. Rowspans und Colspans verstärken das Problem.

Ich dachte zuerst, das Problem sei, dass iPad eine Grenze eingeführt hat.
Das eigentliche Problem ist, dass die Programmierer bei Apple nicht entschieden haben, ob sie Bruchteile eines Pixels gleichmäßig auf oder ab skalieren wollen.

Daher scheinen einige TD-Tags einen Rand zu haben, wenn sie nicht bei 100% Skalierung sind. Wenn in Wirklichkeit nur der helle Hintergrund durchscheint.

Die Lösung ist, um die Tabelle in eine andere Tabelle zu verpacken, die den gleichen dunklen Hintergrund hat.

Willkommen bei 1998 Web-Design. Ich höre mp3.com ist der letzte Schrei. Werde mir ein paar Versandhunde von pets.com kaufen.

Danke iPad.

Answer 6

Ich löste das auf eine seltsame Art und Weise.

Zuerst habe ich eine <div> innerhalb jeder Zelle, die dieses Problem aufgetreten ist, wenn es Inhalt in der Zelle dann stellen Sie sicher, dass die <div> ist hinter es und wickelt den Inhalt nicht. Dann wandte ich die Klasse ios-table-fix an die <div> und ios-table an eine der Tabellenzellen an (<td>).

Dann schrieb ich einige CSS innerhalb von Medienabfragen, die auf die Bildschirmauflösung des iPad abzielen. Als erstes habe ich folgendes ios-table:

overflow: hidden; 
position: relative; 

Next ich folgendes zum ios-table-fix hinzugefügt:

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

Sie gehen position: relative; und z-index: 2; auf Inhalte innerhalb der Tabelle anwenden wollen, Zellen, sonst werden sie verschwinden.

Das zeichnet effektiv einen neuen Hintergrund für die Tabellenzelle, die das Rahmenproblem überläuft, ohne die Größe der Tabellenzelle zu ändern. Da es sich nur um ein iPad-Problem handelt, können wir CSS im Tag <head> verwenden, um alles zu vermeiden.

Ich habe dies nur kurz getestet, aber es scheint zu funktionieren, ohne an anderer Stelle Probleme zu verursachen.