想要在 html 电子邮件中使用两种颜色的 div答案

【问题标题】：Want in a html email a div with two colors想要在 html 电子邮件中使用两种颜色的 div
【发布时间】：2014-03-19 09:17:25
【问题描述】：

我想在一封我用 HTML 编码的电子邮件中包含一个具有两种颜色的 div 和一个跨度文本。

我已经编码了这个：

<div class="msg" style=" width: 500px; background-color: gray; position: relative;">
<span class="text" style="font-size: 11px; color: white; position: absolute; bottom: 5px; left: 1%;">A text in a span.</span>
<div class="refus" style="width: 50%; height: 25px; background-color: #EF4135"></div>
</div>

您可以在此处找到演示： http://jsfiddle.net/aWvcp/2/

问题是，在 Thunderbird 这样的邮件工具中，它可以工作，但在 Outlook 中却不行。

是否可以具有相同的渲染但与 Outlook 兼容？

【问题讨论】：

HTML 电子邮件是现代数字通信中最烦人的事情之一。它们是一个巨大的安全线程，这意味着您需要接收者的最终信任。换句话说：每个以任何方式关心安全的人都必须在不阅读的情况下删除您的消息，否则他将面临安全漏洞的风险。因为 html 电子邮件被认为是一种糟糕的沟通方式：没有任何必要的侵略性和过于复杂。不要发送此类消息。
我需要发送此消息，因为客户想要带有一些图表的消息类型 ;-)。
在这种情况下，发送一条普通的文本消息，其中包含指向显示信息的网页的链接。客户也很可能不知道他冒着风险的安全线程。你应该通知他。

标签： html outlook html-table html-email

【解决方案1】：

很难准确说出你想要什么，但这里有一个正确的 html 电子邮件格式的示例：

<table width="500" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" bgcolor="#EF4135" valign="bottom" style="font-size: 11px; color: white; padding:1%; padding-bottom:5px;">
      First column<br>...<br>...
    </td>
    <td valign="top" width="50%">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="25" bgcolor="#818181">
            &nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

为了确保最严格地遵守您的设计，我会避免使用<DIV>s、CSS 位置声明和跨度。尽可能使用表格、内联边距标签和带有内联样式的<p>。在JSfillde 中查看您想要的内容。

【讨论】：

谢谢是的，我也用表格测试了一个解决方案，但问题是文本。如果文本太长而不能在 column1 中，则 column1 将“胖”，太高。