如何在 Outlook 客户端中产生这种效果？答案

【问题标题】：How can I produce this effect within the outlook client?如何在 Outlook 客户端中产生这种效果？
【发布时间】：2019-10-04 11:20:08
【问题描述】：

我在 Rails 中创建了一个邮件程序视图，它在除 Outlook 之外的所有客户端上都显示得很好。限制因素是缺少“位置”属性。

我正在尝试将图像放在表格行的顶部，以便顶部和底部边缘位于该行的上方/下方。我已经为其他电子邮件客户端实现了这一点，方法是将图像放在其上方的另一行，使位置成为绝对位置，并给它一个负的上边距。然后我可以通过调整顶部边距值将图像向下并尽可能多地重叠底部行。（见代码）

<tr>
  <td>
    <%= image_tag(attachments['logo.png'].url, style:"text- 
      align:left;height:100px; width:100px; margin:-30px 10px 10px 10px; 
      position: absolute") %>
  </td>
</tr>

<tr>
  <td style="text-align: left; padding-left: 125px;">
    Some Text
  </td>
</tr>

position: absolute 在 Outlook 中不起作用，有什么好的替代方法可以帮助我实现这一目标？

谢谢！

【问题讨论】：

标签： html css ruby-on-rails html-table outlook

【解决方案1】：

您将无法以与 position:absolute 相同的方式实现此目的。
您的选择是：

将图像一分为三，并将每个切片分别放在三个部分中。
将三行部分制作成背景图像，然后照常放置图像。

我知道这两种方法都不理想，但您受限于 Outlook，通常的边距和头寸技巧将不起作用。

使用我建议的选项，而不是重组代码，您可以使用 Outlook 特定的条件语句为 Outlook 添加一个新块：

<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>Outlook content</td>
    </tr>
</table>
<![endif]-->

<!--[if !mso]><!-- -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>All other clients</td>
    </tr>
</table>
<!--<![endif]-->

【讨论】：