iPad上带有表格边框的CSS问题答案

【问题标题】：CSS issue on iPad with table borderiPad上带有表格边框的CSS问题
【发布时间】：2011-04-22 20:28:47
【问题描述】：

在 iPad 上呈现 html 页面时出现 CSS 问题。在其他浏览器中一切正常。问题是我的表格中的单元格之间的空间很小，如图所示：http://oi53.tinypic.com/2vl0as9.jpg

如果我在单元格之间的行上放大页面最大值，它就会消失。所以在呈现页面时一定是某种错误。我可以以某种方式解决这个问题吗？这是我的表格和 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);
}

【问题讨论】：

我对 ipad 渲染有同样的问题。我正在使用 webkit 后台填充，它也在做同样的事情。

标签： css iphone ipad html-table border

【解决方案1】：

在尝试制作 HTML 格式的电子邮件时，我刚刚为这个错误苦恼了半天。

在以非 1:1 比例查看表格时，iPad 有一个错误（喘不过气来！）。如果您的表的 TD 标记具有深色背景并且 TABLE 的父级具有浅色，则这一点尤其明显。 Rowspans 和 colspans 放大了这个问题。

我最初认为问题在于 iPad 引入了边框。
真正的问题是，Apple 的编码人员并没有决定他们是在缩放时统一向上还是向下舍入一个像素的分数。

因此，一些 TD 标签在未达到 100% 比例时似乎有边框。实际上，它只是透出的浅色背景。

解决方案是将表格包裹到另一个具有相同深色背景的表格中。

欢迎来到 1998 年网页设计。我听说 mp3.com 风靡一时。我要从 pets.com 给我买一些邮购的狗零食。

感谢 iPad。

【讨论】：

遗憾的是，我的表格行使用交替的背景颜色并具有可调节的高度内容，因此更改背景颜色对我的情况没有帮助:)。

【解决方案2】：

当在请求中检测到 iDevice（iPod、iPad、iPhone）时，我能够将这个 元标记 放在 html 头中来修复它。

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

希望对你有帮助。

【讨论】：

有趣的方法，但是当我稍微放大时边框又回来了。

【解决方案3】：

尤里卡！我找到了适合我的解决方案。

我的背景是浅灰色，这似乎是我的桌子周围显示为边框的颜色，颜色较深。

要修复它，您必须将所有受边框影响的标签放置到另一个相同颜色的表格中。

在尝试了这么多事情之后，这才奏效。希望这会有所帮助

【讨论】：

【解决方案4】：

Zheileman 的解决方案对我有用，现在我的带有 CSS 图像背景的选项卡在 iPad 上看起来正确。在 iPad 上查看 http://www.meishapersonaltrainer.com 上的顶部菜单选项卡，了解实际修复的示例。

执行检测并添加 META 的我的 PHP 看起来像这样

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

【讨论】：

【解决方案5】：

这是在网络上管理表格样式的一般做法，应该可以解决您的问题：

table { border-collapse: collapse; }

您可以删除表格单元格的边距设置，它们不会影响任何内容。

【讨论】：

没有改变边框样式 - 问题原来根本不是边框，它似乎只是一个

【解决方案6】：

我以一种奇怪的方式解决了这个问题。

首先，我在遇到此问题的每个单元格内添加了一个<div>，如果单元格中有内容，请确保<div> 在它之后并且不包装内容。然后我将ios-table-fix 类应用到<div> 和ios-table 到任何表格单元格（<td>）。

然后我在针对 iPad 屏幕分辨率的媒体查询中编写了一些 CSS。首先，我将以下内容添加到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 来避免影响一切。

我只是对此进行了简单的测试，但它似乎可以正常工作而不会在其他地方引起问题。

【讨论】：

此后，我在 Windows Phone 上进行了测试，但似乎仍然存在边框问题。