Question

我使用模板为我的公司创建HTML简报。我对任何编程语言知之甚少，这就是我开始使用模板的原因。我已经向我的工作电子邮件地址（outlook 2010）和我的个人电子邮件（gmail）发送了一些测试。它在我的Gmail中看起来很棒，但在展望中，它决定将时事通讯的标题略微交错，在“焦点”一词下面加上“新闻”一词，在左下方略微偏离左侧。请看这张图片，看看我的意思：
我想知道如何更改代码，以便它在Outlook中显示它在gmail中显示的方式，一切都在一行上？

另外，我真的不知道下面是否显示过太多代码;或者还不够，我所知道的是标题部分在那里，任何对初学者的帮助都会有很大的帮助

<div id="SpeBkDiv" style="background-color: #ffffff;">
<!--100% body table-->
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%">
     <tbody>
         <tr>
             <td>
             <!--email container-->
             <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
                 <tbody>
                     <tr>
                         <td>
                         <!--header-->
                         <table border="0" cellpadding="0" cellspacing="0" width="600">
                             <tbody>
                                 <tr>
                                     <td valign="top">
                                     <img src="image url here" alt="" height="12" width="600" />
                                     <!--top links-->
                                     <table border="0" cellpadding="0" cellspacing="0" height="52" width="600">
                                         <tbody>
                                             <tr>
                                                 <td valign="middle" width="221">
                                                 <p style="font-size: 10px; font-family: Times New Roman; color: #333; margin: 0px;" align="center"><br />
                                                 </p>
                                                 </td>
                                             </tr>
                                         </tbody>
                                     </table>
                                     <!--/top links-->
                                     <!--line break-->
                                     <table border="0" cellpadding="0" cellspacing="0" height="14" width="600">
                                         <tbody>
                                             <tr>
                                                 <td valign="top" width="600">
                                                 <p>
                                                 <img src="image url here" alt="" height="10" width="600" />
                                                 </p>
                                                 </td>
                                             </tr>
                                         </tbody>
                                     </table>
                                     <!--/line break-->
                                     <!--header content-->
                                     <table border="0" cellpadding="0" cellspacing="0" height="168" width="600">
                                         <tbody>
                                             <tr>
                                                 <td>
                                                 <h1 style="color: #333 !important; margin: 0px; font-weight: normal; font-size: 30px; font-family: Verdana" align="center">
                                                 <span style="font-size: 50pt; color: #808080;">
                                                 <a title="image name" href="image url here">
                                                 <img style="text-align: left; float: left;" alt="" src="image url here" align="left" height="79" width="103" />
                                                 </a>
                                                 </span>
                                                 </h1>
                                                 <h1 style="color: #333 !important; margin: 0px; font-weight: normal; font-size: 30px; font-family: Verdana;" align="center">
                                                 <span style="font-size: 45pt; color: #808080;">
                                                 <c>
                                                 <span style="font-family: Verdana; font-size: 40pt;">Focus News</span>
                                                 </c>
                                                 </span>
                                                 <span style="font-size: 50pt; color: #808080;">
                                                 </span>
                                                 <currentmonthname style="font-size: 36pt; color: #333333;">
                                                 <currentyear>
                                                 </currentyear>
                                                 </currentmonthname>
                                                 </h1>
                                                 </td>
                                                 <td id="issue" style="background-image: url('images/issue-no.jpg'); background-color: #98AFC7; background-repeat: no-repeat; background-position: top; width: 109px; height: 109px;" bgcolor="#98AFC7" valign="top">
                                                 <!--number-->
                                                 <table border="0" cellpadding="2" cellspacing="2" height="81" width="126">
                                                     <tbody>
                                                         <tr>
                                                             <td>
                                                             <div align="center">
                                                             <h4>
                                                             <span style="color: #ffffff; font-family: Verdana;">Issue no.7</span>
                                                             </h4>
                                                             </div>
                                                             <div align="center">
                                                             <h4>
                                                             <span style="color: #ffffff; font-family: Verdana;">July</span>
                                                             <span style="color: #ffffff; font-family: Verdana;">2012</span>
                                                             </h4>
                                                             </div>
                                                             </td>
                                                         </tr>
                                                     </tbody>
                                                 </table>
                                                 <!--/number-->
                                                 <br />
                                                 </td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
     </tbody>
  </table>

Answer 1

首先要尝试验证你的HTML。尝试访问http://validator.w3.org/check，然后粘贴代码或浏览到要上传的html文件。

Answer 2

我测试了你的代码，在Outlook2007上（我没有最新版本）效果很好。我可以看到你在Focus News附近有标签。摆脱这些，他们可能被Outlook错误地解释，并在行的开头添加一些额外的空间。两个嵌套的跨度看起来也很奇怪。所以我的建议是改变这些界限：

 <span style="font-size: 45pt; color: #808080;">
    <c>
        <span style="font-family: Verdana; font-size: 40pt;">Focus News</span>
    </c>
 </span>

到这个

<span style="font-family: Verdana; font-size: 40pt;">Focus News</span>

P.S。正如前面的答案中所建议的那样验证您的代码可能毫无意义，因为时事通讯使用的标准可追溯到1999年。但是尽可能保持标记清晰（在这里您可以找到一些有趣的指南http://www.campaignmonitor.com/css/）

为什么Outlook 2010会在两行显示我的标题？

2 个答案: