iPad上使用表格边框的CSS问题

Question

iPad上使用表格边框的CSS问题

12

我在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);
}

- Martin

我在iPad渲染方面遇到了同样的问题。我正在使用WebKit背景填充，它也出现了这种情况。 - Michael Robinson

6个回答

7

当请求检测到iDevice（iPod、iPad、iPhone）时，在html头部加入这个meta标签，我成功修复了它。

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

希望这能帮到你。

- Zheileman

3

有趣的方法，但当我稍微缩放时，边框会再次出现。 - Béatrice Cassistat

3

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

- ChrisWhoCodes

3

哎呀！我找到了一个对我有用的解决方案。

我的背景色是浅灰色，似乎这是围绕着我的表格边框所显示的颜色，而表格本身是较深的颜色。

要修复它，您需要将所有受到边框影响而显示问题的标签放入另一个相同颜色的表格中。

在尝试了很多方法后，这个方法终于奏效了。希望这可以帮助您。

- Johnny

0

这是一个在网页上管理表格样式的通用实践，应该可以解决你的问题：

table { border-collapse: collapse; }

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

- bstst

没有任何边框样式的更改是有用的 - 问题最终并不是边框，看起来只是一个表面现象。 - Iiridayn

0

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

首先，我在每个出现此问题的单元格内添加了一个<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来避免影响其他所有东西。

我只是简要测试了一下，似乎可以正常工作，而不会引起其他问题。

- Greg Cooper

自从那以后，我在Windows Phone上进行了测试，似乎仍然存在边框问题。 - Greg Cooper

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mrbinky3000 · Accepted Answer

我在制作HTML格式电子邮件时，遇到了一个问题，花了半天时间终于解决了。iPad存在一个bug，当以非1:1比例查看表格时会特别明显，尤其是当表格的TD标签具有深色背景且表格的父元素具有浅色时更为明显，行跨度和列跨度会放大这个问题。

起初我以为问题是iPad引入了边框。但实际问题是，在缩放时苹果公司的编程人员没有统一将小数像素四舍五入或向下取整。

因此，一些TD标签在缩放到100%时会出现边框，实际上只是浅色背景显示出来了。 解决方法是将表格包装到另一个具有相同深色背景的表格中。

欢迎回到1998年的网页设计时代，听说mp3.com很火。我要从pets.com购买一些邮购狗粮。谢谢你，iPad。