在桌面邊界的iPad上的CSS問題

當HTML頁面在iPad上呈現時，我遇到CSS問題。在其他瀏覽器中一切正常。問題是，我得到了我的表格中的單元格之間的一個小空間，你可以在圖片中看到：http://oi53.tinypic.com/2vl0as9.jpg 在桌面邊界的iPad上的CSS問題

如果我放大單元格之間的線上的頁面最大值，它消失..所以它必須是頁面呈現時的某種錯誤。我能以某種方式繞過這個嗎？這是我的表和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); 
}

來源

2010-10-08 Martin

我有與iPad的渲染相同的問題。我正在使用webkit baackground填充，它也在做同樣的事情。 – 2010-11-18 15:01:00

這是在網絡上管理表格樣式的一般做法，而應該解決您的問題：

table { border-collapse: collapse; }

您可以刪除表格單元格的邊距設置，但不影響任何內容。

來源

2011-01-11 10:39:31 bstst

沒有改變邊框造型工作 - 問題原來不是邊界的，它似乎是一個 – Iiridayn 2016-03-18 20:06:29

我能夠修復它，當在請求中檢測到iDevice（iPod，iPad，iPhone）時，將此元標記置於html頭部。

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

希望它有幫助。

來源

2011-06-10 11:42:51 Zheileman

有趣的方法，但邊界回來時，我稍微放大。 – 2012-08-28 15:39:54

尤里卡！我找到了適合我的解決方案。

我有一個淺灰色的背景，這似乎是作爲一個顏色較深的我的桌子周圍的邊界顯示的顏色。

要解決這個問題，你必須將受到邊界影響的所有標籤放入另一張表中，並將其顯示爲相同的顏色。

嘗試這麼多事情後，這工作。希望這有助於

來源

2011-10-13 10:15:01 Johnny

Zheileman的解決方案爲我工作，現在我的CSS圖像背景的標籤在iPad上看起來是正確的。在iPad上查看http://www.meishapersonaltrainer.com上的頂部菜單選項卡，查看修復實例的示例。

我的PHP執行檢測，並增加了META看起來像這樣

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" />'; 
    } 
}

來源

2011-10-30 21:47:32 ChrisWhoCodes

我只是撞壞我的頭靠在這個錯誤了半天，而試圖讓一個HTML格式的電子郵件。

以非1：1的比例查看錶格時，iPad的錯誤（喘氣！）。如果您的餐桌的TD標籤有深色背景並且TABLE的父餐具有淺色，這一點尤其明顯。 Ranspans和colspans放大了這個問題。

我最初認爲問題在於iPad引入了邊框。
真正的問題在於蘋果公司的編碼人員並沒有決定他們是否要在縮放時統一捨棄像素的一部分。

因此，某些TD標籤在100％縮放比例時似乎具有邊框。實際上，它只是透視的淺色背景。

解決方案是將表格換成另一張具有相同黑色背景的表格。

歡迎使用1998年的網頁設計。我聽到mp3.com風靡一時。要去買一些來自pets.com的郵購狗款待。

感謝iPad。

來源

2011-11-22 16:59:57 mrbinky3000

不幸的是，我的表格行使用交替的背景顏色，並且具有可調高度的內容，所以改變背景顏色對我的情況沒有幫助:)。 – Iiridayn 2016-03-18 20:24:00

我用奇怪的方式解決了這個問題。

首先，我在每個正在遇到此問題的單元格內添加一個<div>，如果單元格中有內容，請確保<div>在它之後，並且不會包裝內容。然後，我將ios-table-fix類別應用於<div>和ios-table以應用到任何表格單元格（<td>）。

然後，我在媒體查詢中寫了一些CSS，其目標是iPad的屏幕分辨率。首先登場的我增加了以下內容ios-table：

overflow: hidden; 
position: relative;

接下來，我添加了以下到ios-table-fix：

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

你會想申請position: relative;和z-index: 2;的任何內容表內細胞，否則它們會消失。

這有效地爲表格單元格提供了一個新的背景，它可以在不改變表格單元格的大小的情況下溢出邊界問題。由於這只是一個iPad問題，我們可以在<head>標籤中使用CSS來避免影響所有內容。

我只是簡單地測試了一下，但它似乎在其他地方沒有引起問題。

來源

2013-11-22 02:34:29

由於這一點，我在Windows Phone上測試過，它似乎仍然遭受邊界問題的困擾。 – 2013-11-22 05:01:19

在桌面邊界的iPad上的CSS問題

回答

相關問題