响应式电子邮件表格间距 - Ipad 和 Iphone 仍然显示

Question

我正在为所有平台开发响应式电子邮件

在一张表格中，我在<TD> 和中心<TD> 中使用了背景颜色放置了4 张图像。进一步使用每个表的表折叠。 供您快速参考的代码如下：

但我在 I-Pad 和 I-phone 中面临的问题是每个圆圈都有可见的轻微白线，如下图所示。

您在这方面的帮助对我来说将是一个很大的帮助。 期待您尽早得到答复。

<table width="285" border="0" cellspacing="0" cellpadding="0" 
style="border-spacing:0; background-color:#f0f0f0;">
            <tr>
              <td width="5" height="35" ></td>
              <td width="35" height="35" align="left" valign="top" ><table width="35" style="border-collapse:collapse;" height="35" border="0" align="left" cellpadding="0" cellspacing="0" >
                <tr>
                  <td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
                </tr>
                <tr>
                  <td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
                  <td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
                  <td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
                </tr>
                <tr>
                  <td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;"  /></td>
                </tr>
              </table></td>
              <td width="5" height="35" align="left" valign="top" ></td>
              <td width="35" height="35" align="left" valign="top"><table width="35" style="border-collapse:collapse;" height="35" border="0" cellpadding="0" cellspacing="0" >
                <tr>
                  <td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
                </tr>
                <tr>
                  <td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" hspace="0" vspace="0" width="5" height="23" border="0" /></td>
                  <td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
                  <td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
                </tr>
                <tr>
                  <td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;"  /></td>
                </tr>
              </table></td>
              <td width="5" height="35" align="left" valign="top" ></td>
              <td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
                <tr>
                  <td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
                </tr>
                <tr>
                  <td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" hspace="0" vspace="0" width="5" height="23" border="0" /></td>
                  <td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
                  <td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
                </tr>
                <tr>
                  <td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;"  /></td>
                </tr>
              </table></td>
              <td width="5" height="35" align="left" valign="top" ></td>
              <td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
                <tr>
                  <td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
                </tr>
                <tr>
                  <td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
                  <td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
                  <td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
                </tr>
                <tr>
                  <td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;"  /></td>
                </tr>
              </table></td>
              <td width="5" height="35" align="left" valign="top" ></td>
              <td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
                <tr>
                  <td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
                </tr>
                <tr>
                  <td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
                  <td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
                  <td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
                </tr>
                <tr>
                  <td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;"  /></td>
                </tr>
              </table></td>
              <td width="5" height="35" align="left" valign="top" ></td>
              <td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
                <tr>
                  <td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" style="display:block;" width="35" height="6" border="0" align="absbottom" /></td>
                </tr>
                <tr>
                  <td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" width="5" height="23" border="0" /></td>
                  <td width="25" height="22" align="center" valign="middle" style="color:#ffffff;font-size:12px;font-family:Arial;font-weight:bold;text-align:center;" bgcolor="#D50000">1</td>
                  <td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" style="display:block;" width="5" height="23" border="0" /></td>
                </tr>
                <tr>
                  <td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" style="display:block;" width="35" height="6" border="0" align="texttop" /></td>
                </tr>
              </table></td>
              <td width="5" height="35" align="left" valign="top" ></td>
              <td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" height="35" style="border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td height="6" colspan="3" valign="bottom"><img src="white-lotto-tp.jpg" alt="" width="35" height="6" align="absbottom" border="0" /></td>
                </tr>
                <tr>
                  <td width="5" height="23" align="right"><img src="white-lotto-lt.jpg" border="0" width="5" height="23" alt="" /></td>
                  <td width="25" height="23" align="center" valign="middle" bgcolor="#000099"><span style="color:#ffffff;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">14</span></td>
                  <td width="5" height="23" align="left"><img src="white-lotto-rt.jpg" border="0" width="5" height="23" alt="" /></td>
                </tr>
                <tr>
                  <td height="6" colspan="3" valign="top"><img src="white-lotto-bt.jpg" border="0" width="35" height="6" align="texttop" alt="" /></td>
                </tr>
              </table></td>
              <td width="5" height="35" ></td>
            </tr>
            </table>

Answer 1

试一试

vertical-align: middle;

在图片元素的style 属性中。如果这不起作用，最好获得完整的 HTML 和显示问题的图像。