移动设备上的 Yahoo webmail 删除了文本按钮之间的空格答案

【问题标题】：Yahoo webmail on mobile removes spaces between text buttons移动设备上的 Yahoo webmail 删除了文本按钮之间的空格
【发布时间】：2015-01-02 22:54:15
【问题描述】：

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>

还有截图：

非常感谢任何帮助！

【问题讨论】：

标签： html iphone email yahoo

【解决方案1】：

如果将宽度从 td 移动到表格并从表格中移除单元格填充，会发生什么情况？

我无法复制该问题，但是当我更改代码以遵循上述内容时，我可以获得更好的渲染结果。它将使表格推到单元格的整个宽度，但无论如何这都是正确的构建方式。将表格宽度减小到 560 会得到与代码在表格任一侧的填充方面给出的结果相同的结果。

【讨论】：

感谢 Digital-Frankenstein，我假设您的意思是将宽度属性从 tds 移动到表格以强制表格的宽度。刚刚了解到 Outlook.com 的呈现方式与 Yahoo 相同。这可以与 iPhone Safari 上的任何网络邮件客户端隔离。我将在 iOS Chrome 上进行测试。
开枪，对不起。发帖后应该有证明的。修正了我的答案
感谢 Digital，您的方法绝对有帮助！我也从 Campaign Monitor 那里得到了一些建议。切勿将表格单元格填充与内联 CSS 填充结合使用。请参阅答案中的链接。

【解决方案2】：

除了设置表格的宽度，正如Digital解释的那样，建议不要在tds上结合内联CSS填充定义表格cellpadding属性。

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

从表格中删除单元格填充并内联后，电子邮件在 Yahoo 和 AOL 中呈现良好：

【讨论】：