响应电子邮件表间距 - 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和显示问题的图像会很棒。