移动 Safari 中的表格错误答案

【问题标题】：Bug with table in mobile Safari移动 Safari 中的表格错误
【发布时间】：2011-11-22 21:31:25
【问题描述】：

我有下表：

<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse">
<tr>
    <td class="tr-l-t">
    </td>
    <td class="tr-t">
    </td>
    <td class="tr-r-t">
    </td>
</tr>
<tr>
    <td class="tr-l">
    </td>
    <td class="control-panel">
    </td>
    <td class="tr-r">
    </td>
</tr>
<tr>
    <td class="tr-l-b">
    </td>
    <td class="tr-b">
    </td>
    <td class="tr-r-b">
    </td>
</tr>

...和 CSS

.tr-l-t
{
    background: url("../Images/tr_l_t.png") no-repeat;
    width: 6px;
    height: 6px;
}
.tr-l-b
{
    background: url("../Images/tr_l_b.png") no-repeat;
    width: 6px;
    height: 6px;
}
.tr-r-t
{
    background: url("../Images/tr_r_t.png") no-repeat;
    width: 6px;
    height: 6px;
}
.tr-r-b
{
    background: url("../Images/tr_r_b.png") no-repeat;
    width: 6px;
    height: 6px;
}
.tr-t
{
    background: transparent url("../Images/tr_t.png") repeat scroll 0 0;
    height: 6px;
}
.tr-l
{
    background: transparent url("../Images/tr_l.png") repeat scroll 0 0;
}
.tr-r
{
    background: transparent url("../Images/tr_r.png") repeat scroll 0 0;
}
.tr-b
{
    background: transparent url("../Images/tr_b.png") repeat scroll 0 0;
    height: 6px;
}
.control-panel
{
    background-color: #151515;
    width: 300px;
    height: 30px;
}

在 IE7/8、FF、Chrome 和 Safari（Windows 和 Mac OS）浏览器中看起来都不错。然而，在 Ipod / Iphone / Ipad 的 Safari 中，白色条纹出现在 td 标记之间。我尝试添加边框：0 none，填充：0px，边距：0px，但没有成功。

您对如何解决它有任何想法吗？

【问题讨论】：

标签： iphone css mobile-safari

【解决方案1】：

margin-bottom: -2px; //on one of the TD elements

这对我有用，但在我的情况下，我加入了两个纯白色的 TD。不确定这是否适用于所有情况。

【讨论】：

【解决方案2】：

使用页面模板中的元标记设置视口。当比例为“1”时，表格看起来还不错。当放大或缩小或什至将初始缩放设置为 1 以外的任何值时，您会得到间隙。这就是我目前正在做的事情。

【讨论】：