如何修复 Google 收件箱（Gmail 中不存在）中添加缩写点的 html 呈现问题
How do I fix an html rendering issue in Google Inbox (not present in Gmail) that adds abbreviation points
我在下面创建了这个电子邮件布局，但我终究无法弄清楚为什么 Gmail 可以正确呈现它，而 Inbox 却呈现得很糟糕。
经检查，出于某种原因将一堆东西分成它们自己的 table 元素。任何人都看到我遗漏的东西。我对 html 的电子邮件还很陌生，并且经常对它的糟糕程度感到震惊。
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td>
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="padding: 35px;">
<h3>
Welcome <span style="text-decoration: none;"><%= @email %></span>!
</h3>
<div>
<span style="display: block;">You can confirm your account email through the link below:</span>
<br>
<a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" target ="_blank" style="display: block; color: orange; text-decoration: none; font-size: 150%;">Confirm your account</a>
<br>
<span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(@resource, confirmation_token: @token) %></span>
<h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr>
</table>
</td>
</tr>
</table>
</body>
这是当收件箱出于某种原因隐藏了整条消息时的样子，这似乎发生在我发送 "reconfirm" 消息时：
Gmail：
了解 "fussy" 电子邮件客户端的情况后，我发现有一件事可能会导致不可预测的结果。除了打字错误，这将解决任何其他问题，这是一个远景。但是在那行代码中，你看到我在 'color: 2b2b2b' 附近看到的了吗？
<td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td>
分号在样式属性之外。 Prolley 只是一个犯规球，但你永远不知道。 ;)
我真的建议删除所有非 table 元素，因为即使是 2016 年，邮件客户端也远远落后
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">
shift
</td>
<td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">
Swap
</td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td style="padding: 35px;background: #FFF">
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="text-decoration: none; font-size: 22px">
Welcome
@ email !
</td>
</tr>
<tr>
<td style="padding-top: 20px; font-size: 22px">
You can confirm your account email through the link below:
</td>
</tr>
<tr>
<td>
<a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" target="_blank" style="display: block; color: orange; text-decoration: none; font-size: 150%;">Confirm your account</a>
</td>
</tr>
<tr>
<td>
Or paste the following into the address bar:
confirmation_url
</td>
</tr>
<tr>
<td style="padding: 20px 0; font-size: 22px">
Thanks for signing up. We're looking forward to seeing you on the site!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center">
<td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©
<%=T ime.new.year %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
我在下面创建了这个电子邮件布局，但我终究无法弄清楚为什么 Gmail 可以正确呈现它，而 Inbox 却呈现得很糟糕。
经检查，出于某种原因将一堆东西分成它们自己的 table 元素。任何人都看到我遗漏的东西。我对 html 的电子邮件还很陌生，并且经常对它的糟糕程度感到震惊。
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td>
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="padding: 35px;">
<h3>
Welcome <span style="text-decoration: none;"><%= @email %></span>!
</h3>
<div>
<span style="display: block;">You can confirm your account email through the link below:</span>
<br>
<a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" target ="_blank" style="display: block; color: orange; text-decoration: none; font-size: 150%;">Confirm your account</a>
<br>
<span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(@resource, confirmation_token: @token) %></span>
<h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr>
</table>
</td>
</tr>
</table>
</body>
这是当收件箱出于某种原因隐藏了整条消息时的样子，这似乎发生在我发送 "reconfirm" 消息时：
Gmail：
了解 "fussy" 电子邮件客户端的情况后，我发现有一件事可能会导致不可预测的结果。除了打字错误，这将解决任何其他问题，这是一个远景。但是在那行代码中，你看到我在 'color: 2b2b2b' 附近看到的了吗？
<td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td>
分号在样式属性之外。 Prolley 只是一个犯规球，但你永远不知道。 ;)
我真的建议删除所有非 table 元素，因为即使是 2016 年，邮件客户端也远远落后
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">
shift
</td>
<td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">
Swap
</td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td style="padding: 35px;background: #FFF">
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="text-decoration: none; font-size: 22px">
Welcome
@ email !
</td>
</tr>
<tr>
<td style="padding-top: 20px; font-size: 22px">
You can confirm your account email through the link below:
</td>
</tr>
<tr>
<td>
<a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" target="_blank" style="display: block; color: orange; text-decoration: none; font-size: 150%;">Confirm your account</a>
</td>
</tr>
<tr>
<td>
Or paste the following into the address bar:
confirmation_url
</td>
</tr>
<tr>
<td style="padding: 20px 0; font-size: 22px">
Thanks for signing up. We're looking forward to seeing you on the site!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center">
<td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©
<%=T ime.new.year %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>