Outlook 边框无法解析答案

【问题标题】：Outlook Border not resolvingOutlook 边框无法解析
【发布时间】：2013-05-01 12:32:58
【问题描述】：

我正在尝试制作 HTML 电子邮件模板（在最好的情况下很困难），并且我正在尝试在标题和内容之间设置一条双线。我正在尝试使用边框样式来实现这一点：

<div class="1"> header image </div>
<div class="2"> random text </div>

使用头部样式表：

.1 {
    margin:0;
    padding: 0;
    border-bottom:thin solid red;
}
.2 {
    margin:0;
    padding: 0;
    border-top:thin solid yellow;
}

它似乎在 WLM 和其他电子邮件客户端中运行良好，但不是 Outlook。

【问题讨论】：

我强烈建议避免使用 <style> 并改用内联 style="" - 请参阅 stackoverflow.com/questions/127498/…（关于该问题的很多好建议）
请记住，在 CSS 中使用类名 begin with a number 是无效的
请准确描述出了什么问题，或者添加一个屏幕截图显示它在 Outlook 中的行为以及它在其他电子邮件阅读器中的显示方式，或者添加指向完整 HTML 源代码的链接。
andyb，我确实有一些适用于多个 div 的样式数据，所以我希望避免使用内联样式 Adrift，我只是使用数字作为占位符，它们有正确的名称

标签： html css outlook html-email email-client

【解决方案1】：

根据我使用电子邮件 HTML 和 Outlook 的经验，我发现我总是回到使用表格进行布局。许多不同的电子邮件客户端对 HTML 做了很多奇怪的事情，但表格布局似乎是最兼容跨客户端的。所以，考虑这样的事情：

<table cellpadding="0" cellspacing="0" width="100%" style="border-bottom: solid 1px red;">
    <tr>
        <td> header image </td>
   </tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="border-top: solid 1px yellow;">
    <tr>
        <td> random text </td>
   </tr>
</table>

我还没有测试过，但这是我首先要尝试的。

【讨论】：

我已经对我设计的其他电子邮件做了类似的事情，这太糟糕了...养成使用表格进行布局的可怕习惯...

【解决方案2】：

好吧，制作一个漂亮的电子邮件模板的最简单方法是使用表格（不确定您是否使用它们。尝试尽可能less链接到您的css，但使用@尽量987654322@。

看看这个：OVER HERE!这个对我帮助很大

【讨论】：

我完全同意，但这是展望前景的最佳方式

【解决方案3】：

我建议您对边框样式使用内联 CSS，对颜色使用十六进制值。我已将您的代码更改为老式 CSS。在 Litmus 上进行了试验和测试

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="ffffff">

      <tr>
          <td>
              <table cellpadding="0" cellspacing="0" width="50%" style="border-bottom: solid 1px #ff0000;">
                    <tr>
                        <td> header image </td>
                   </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td style="line-height: 20px; font-size: 20px;">&nbsp;</td>
      </tr>
      <tr>
          <td>
             <table cellpadding="0" cellspacing="0" width="50%" style="border-top: solid 1px #ffff00;">
                <tr>
                    <td> random text </td>
               </tr>
             </table>
          </td>
      </tr>

  </table>

【讨论】：