2

在编写 HTML 电子邮件时，我们遇到了一个奇怪的问题，即在没有明显原因的情况下，缩进出现在 span 中。

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

底部两个电话号码左侧的缩进：（图片来自 Litmus 电子邮件测试应用程序的 Windows 7 HTC 手机测试） 在此处输入图像描述

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

3 回答 3

2

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

于 2012-10-10T08:21:46.410 回答
0

try removing colspan='2' from all the tds

于 2012-09-28T16:33:01.287 回答
0

我建议删除所有行上的无关代码，以消除渲染引擎在每行开头拾取额外空格的可能性<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 添加空格（尤其是在表格布局中）只是通过在我的代码中使用回车（以帮助我更容易阅读）。

于 2012-10-09T13:44:51.727 回答