Question

撰写HTML电子邮件时，我们遇到了一个奇怪的问题，其中缩进出现在跨距内，没有明显的原因。

我已经在下面添加了HTML，但据我所知，没有应用于跨度的填充，边距等。内联样式似乎都不是原因。假设我在这里遗漏了一些非常基本的东西。

底部两个电话号码左侧的缩进：（图片来自Litmus电子邮件测试应用程序的Windows 7 HTC手机测试） enter image description here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
        <title>Title</title>
        <meta name="robots" content="noindex,nofollow" />
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta name="viewport" content="width=device-width" />

                  <style type="text/css">

@media only screen and (max-device-width: 480px) {
body img.banner {max-width: 300px !important; height: auto !important;}
table {max-width: 300px overflow:visible; width: auto; }
}

div, p, a, li, td { -webkit-text-size-adjust:none; }

span { padding: 0; margin: 0; }

.appleLinks a {color:#400400; text-decoration:none;}

.appleLinksGray a:link,.appleLinksGray a:visited {color:#808080;}

.appleLinksGrayClean a:link,.appleLinksGrayClean a:visited {color:#808080; text-decoration:none;}

</style> 
    </head>
    <body style="font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 12px;">
        <table style="background-color: #ffffff; margin: auto; font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px;" border="0" cellspacing="0" cellpadding="0" width="627">
            <tbody>
                <tr>
                    <td colspan="2"><img class="banner" src="" alt="Alt" width="625" height="100" /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: left; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; padding-top: 20px; color: #400400;"><p>Dear ~goesBy~,<br />
                      <br>
                      Text</p>
                      <p>Regards,<br>
                        Text
                          <br>
                          <br>
                      </p>
                      <p><span class="appleLinks">Address<br>
<br>
5:00 – 7:00 pm
                     </span></p>
                      <p><b style="font-family: arial, helvetica, sans-serif; color:#000;">Name<br />
    </b><span style="font-family: arial, helvetica, sans-serif; white-space: nowrap; color: #808080; font-size: 8pt;">Manager<br />
      <br />
      </span><b><span style="font-family: 'times new roman', times, serif; color: #00644c; font-size: 10pt;"><br />
        COMPANY </span></b><br />
  <span class="appleLinksGrayClean" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">Address Line 1</span><br />
  <span class="appleLinksGrayClean" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">Address Line 2</span><br />
    <span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111</span><br />
    <span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111 direct</span><br />
    <span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111 mobile</span><br />
    <a href="mailto:person@example.com" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;"><span class="appleLinksGray" >person@example.com</span></a></p></td>
                </tr>
                <tr>
                    <td style="padding-top: 20px;" colspan="2">
                    <div style="text-align: left; font-family: verdana; color: #333333; font-size: 9px;">Copyright</div>
                    </td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

Answer 1

你检查隐藏的字符了吗？有时复制粘贴代码时，会包含特殊字符。主要来自字符集差异。尝试删除html标记之间的所有空格。

Answer 2

尝试从所有colspan='2'

中删除td

Answer 3

我建议删除所有行上的无关代码，以消除渲染引擎在每个<span>开头拾取额外空格的可能性

<span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111<br />111.111.1111 direct<br />111.111.1111 mobile</span>

我已经看到IE添加空格（特别是在表格布局中）只是通过我的代码中的回车（以帮助我更容易阅读）。

在Windows Phone中<span>标记之前出现的缩进</span>

3 个答案: