手机上的雅虎网络邮件删除了文本按钮之间的空格

Question

Yahoo on iPhone 4s Safari 删除了文本导航按钮之间的间距。除了移动版 Safari 中的 Yahoo 之外，每个经过测试的电子邮件客户端都正确呈现了空格。这是 HTML:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ZZZZZZZZZ | XXXXXXXXX&hellip; </title>
    <style type="text/css">
    .ReadMsgBody{width: 100%;}
    .ExternalClass{width: 100%;}
    body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
    table {border-collapse: collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
    </style>
    
  </head>
  <body><img src="http://link.email.XXXXX.com/1x1.dyn?0OEG61m7iL4JGh7Fv1KvQ-mjt=0" width=1 height=1  width="1" height="1" border="0"><table bgcolor="#ffffff" border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
    <tr><td width="650"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
      <tr><td>
        <table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td width="325" align="left" valign="bottom"><a href="http://link.email.XXXXX.com/u.d?O4Gupk-UIFStoz8g_FXuD=19211" style="font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#040400;text-decoration:underline;line-height:20px;">XXXXXXXXXX&hellip; </a></td><td width="325" align="right" valign="bottom"><a href="http://link.email.XXXXX.com/t.d?bYGupk-UIFStoz=/@HTML_2PREVIEW_2LINK_0a=WCL4JeqxNRqx-4ctqli6ZBkO" style="color: #000000;font-family: arial; font-size: 10px; text-decoration: underline;">View in web browser</a></td></tr>
          </table>
        </td></tr>
        <tr><td id="header" align="center" width="650"><table id="header" width="650" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="650" style="padding-top:30px;">
   <table width="650" border="0" cellpadding="0" cellspacing="0">
                <tr>
                 <td width="535" align="left"><a href="http://link.email.XXXXX.com/u.d?YYGupk-UIFStoz126b=123" width="535"><img border="0" style="display:block;color:#EC008C;font-family:Arial, Helvetica, sans-serif;" src="../../images/content/dai/temp/438/MS_header_01.gif" width="535" height="75" alt="ZZZZZZZZZ" /></a>
  </td>
  <td width="115">
   <img border="0" style="display:block;" height="75" width="115" src="../../images/content/dai/temp/438/spacer.gif" alt="ZZZZZZZZZ" /></td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td width="650">
   <table border="0" cellspacing="0" cellpadding="55" align="center">
    <tr style="text-transform: uppercase; font-family: arial; font-size: 17px;">
     <td align="center" height="35" style="padding-top:0;padding-bottom:0;padding-left:0;"><a href="http://link.email.XXXXX.com/u.d?V4Gupk-UIFStoz127k=133" style="text-decoration: none; color: #000000;">Bestsellers</a></td>
     <td align="center" height="35" style="padding-top:0;padding-bottom:0;padding-left:0;"><a href="http://link.email.XXXXX.com/u.d?CYGupk-UIFStoz127h=143" style="text-decoration: none; color: #000000;">Tops</a>
     </td>
     <td align="center" height="35" style="padding-top:0;padding-bottom:0;padding-left:0;"><a href="http://link.email.XXXXX.com/u.d?R4Gupk-UIFStoz127q=153" style="text-decoration: none; color: #000000;">Bottoms</a>
     </td>
     <td align="center" height="35" style="padding-top:0;padding-bottom:0;padding-left:0;"><a href="http://link.email.XXXXX.com/u.d?HYGupk-UIFStoz1273=163" style="text-decoration: none; color: #000000;">Sale</a>
     </td>
     <td align="center" height="35" style="padding:0;"><a href="http://link.email.XXXXX.com/u.d?BYGupk-UIFStoz127w=173" style="text-decoration: none; color: #000000;">More</a>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table></td></tr>

以及截图：

非常感谢任何帮助！

Answer 1

如果将宽度从 td 移动到 table 并从 table 中移除 cellpadding 会怎样？

我无法重现这个问题，但是当我按照上面的代码更改代码时，我得到了更好的渲染结果。它会使 table 扩展到单元格的整个宽度，但这是无论如何都应该构建的正确方法。将 table 宽度减小到 560 得到的结果与代码根据 table.

任一侧的填充给出的结果相同

Answer 2

除了设置 table 的宽度外，正如 Digital 所解释的，建议不要定义 table cellpadding 属性与 tds 上的内联 CSS 填充相结合。

https://www.campaignmonitor.com/resources/will-it-work/guidelines/

从 table 中删除 cellpadding 并放置内联后，电子邮件在 Yahoo 和 AOL 中呈现良好：

手机上的雅虎网络邮件删除了文本按钮之间的空格

Yahoo webmail on mobile removes spaces between text buttons

html

iphone

email

yahoo