Question

iPhone 4s上的Yahoo Safari删除了文本导航按钮之间的间距。测试的每个电子邮件客户端都在移动Safari中正确地渲染了空格。这是HTML：

＆＃13;

<!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>

＆＃13;

截图：

enter image description here

非常感谢任何帮助！

Answer 1

如果将宽度从td移到表格并从表格中删除cellpadding会怎样？

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

Answer 2

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

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

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

enter image description here

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

2 个答案: