如何解决Google Inbox中的HTML呈现问题(Gmail中不存在),该问题会添加缩写点

rPa*_*Pat 5 html css html-email google-apps

我已经在下面创建了此电子邮件布局,但我一生都无法弄清楚为什么Gmail可以正确呈现它,但是Inbox却可怕地呈现了它。

渲染问题在这里看到。 “ ...”无处不在!

经过检查,出于某种原因将一堆东西分成自己的表元素。有人看到我想念的东西。我对于使用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>
Run Code Online (Sandbox Code Playgroud)

这是收件箱出于某种原因隐藏整个邮件时的外观,这似乎是在我发送“重新确认”邮件时发生的:

Google收件箱默认情况下隐藏吗?

和Gmail:

Gmail呈现

LGS*_*Son 1

我真的建议去掉所有非表格元素,因为即使是 2016 年,邮件客户端也远远落后

\n\n

\r\n
\r\n
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">\r\n  <table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">\r\n    <tr>\r\n      <td>\r\n        <table cellpadding="20" cellspacing="0" border="0" align="center">\r\n          <tr>\r\n            <td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">\r\n              shift              \r\n            </td>\r\n            <td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">\r\n              Swap\r\n            </td>\r\n          </tr>\r\n        </table>\r\n      </td>\r\n    </tr>\r\n    <!-- This is where your content goes bro -->\r\n    <tr>\r\n      <td style="padding: 35px;background: #FFF">\r\n        <table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">\r\n          <tr>\r\n            <td style="text-decoration: none; font-size: 22px">\r\n              Welcome\r\n              @ email !\r\n            </td>\r\n          </tr>\r\n          <tr>\r\n            <td style="padding-top: 20px; font-size: 22px">\r\n              You can confirm your account email through the link below:\r\n            </td>            \r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <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>\r\n            </td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              Or paste the following into the address bar:\r\n              confirmation_url\r\n            </td>\r\n          </tr>\r\n          <tr>\r\n            <td style="padding: 20px 0; font-size: 22px">\r\n              Thanks for signing up. We\'re looking forward to seeing you on the site!\r\n            </td>\r\n          </tr>\r\n        </table>\r\n      </td>\r\n    </tr>\r\n    <tr>\r\n      <td>\r\n        <table width="600" align="center" cellpadding="50">\r\n          <tr align="center">\r\n            <td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> \xc2\xa9\r\n              <%=T ime.new.year %>\r\n            </td>\r\n          </tr>\r\n        </table>\r\n      </td>\r\n    </tr>\r\n  </table>\r\n</body>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n