带有桌边框的iPad上的CSS问题

Question

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

Answer 1

当我在请求中检测到iDevice(iPod,iPad,iPhone)时,我能够修复它将此元标记放在html头中.

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

希望能帮助到你.

Answer 2

在尝试制作HTML格式的电子邮件时,我只是对这个bug感到震惊了半天.

当以非1:1比例查看桌子时,iPad有一个错误(喘气!).如果表格的TD标签背景较暗且TABLE的父级具有浅色,则尤其明显.Rowspans和colspans放大了这个问题.

我最初认为问题是iPad正在引入边框.
真正的问题是Apple的编码员没有决定他们是否会在缩放时将像素的上半部分均匀地向上舍入.

因此,一些TD标签在不是100%规模时似乎有边框.实际上,它只是透过的浅色背景.

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

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

谢谢iPad.

Answer 3

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

table { border-collapse: collapse; }

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