Question

我正在制作一个用于Outlook 2010的新html签名。它在浏览器和大多数电子邮件客户端看起来很好，但在Outlook 2010中它渲染有点不对。正如您从Chrome的第一个屏幕截图中看到的那样，文本与图像的右侧对齐，但在Outlook的第二个屏幕中，它会在图像下方呈现。我该如何解决这个问题？

铬： Chrome http://unihouse.no/images/sig_chrome.PNG

展望： Outlook 2010 http://unihouse.no/images/sig_outlook2010.PNG

聚苯乙烯。我将代码直接粘贴到Outlook Signature html文件中，而不使用内置编辑器。

<div id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #15345B dotted; font-family: 'Trebuchet MS',helvetica,San-Serif; font-size: 11px; color: #15345B; " >
    <a href="http://unihouse.no" title="test.no"><img src="http://unihouse.no/images/arrows3.jpg" alt="Test AS" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
    <div style="padding: 6px 0 0 0">
        <span style="font-size:11px"><strong style="color: #15345B; letter-spacing: 1px">Test Name</strong>, Unihouse Norge AS</span><br>
        <strong style="letter-spacing: 1px">Storkundeansvarlig Østlandet</strong><br>

        e-post: <a href="mailto:test@test.no" title="e-post Chris" style="text-decoration:none; border-bottom:1px dotted #15345B;color:#15345B">test@test.no </a> | tlf: +47 123 45 567<br>
        Besøksadresse: Tjuvholmen allé 3, 0252 Oslo<br>
        Hovedkontor: Innherredsveien 103, 7043 Trondheim<br>    
    </div>
    <div style="clear:both"></div>
</div>

Answer 1

您可以使用表而不是浮动div。尝试制作一个包含一行和两个单元格的表格。将图像放在第一个单元格中，将文本放在第二个单元格中。

这应该强迫他们在任何应用程序中彼此相邻。

<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #15345B dotted; font-family: 'Trebuchet MS',helvetica,San-Serif; font-size: 11px; color: #15345B; " >
<tr>
    <td style="padding: 6px 0 0 0">
        <a href="http://unihouse.no" title="test.no"><img src="http://unihouse.no/images/arrows3.jpg" alt="Test AS" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
    </td>
    <td style="padding: 6px 0 0 0">
        <span style="font-size:11px"><strong style="color: #15345B; letter-spacing: 1px">Test Name</strong>, Unihouse Norge AS</span><br>
        <strong style="letter-spacing: 1px">Storkundeansvarlig Østlandet</strong><br>
        e-post: <a href="mailto:test@test.no" title="e-post Chris" style="text-decoration:none; border-bottom:1px dotted #15345B;color:#15345B">test@test.no </a> | tlf: +47 123 45 567<br>
        Besøksadresse: Tjuvholmen allé 3, 0252 Oslo<br>
        Hovedkontor: Innherredsveien 103, 7043 Trondheim<br>    
    </td>
</tr>

Answer 2

对于HTML电子邮件，您HAVE使用<tables>来确保一致性。然后将文本和图像放在相同的<td>中的相邻<tr>中。 A helpful website

HTML签名呈现不同

2 个答案: