在Outlook中无法正确显示HTML电子邮件签名的烦恼

Question

在Outlook中无法正确显示HTML电子邮件签名的烦恼

htmlcssoutlook-2010email-clientsignatures

5

我已经用html创建了一个简单的电子邮件签名，以下是代码：

<html>

<!-- Company logo goes here -->
<div id="far_left" 
    style="width: 50px; 
           height: 50px;
           float: left;
           margin-right: 10px;">
    <img src="logo.png" />
</div>

<!-- Name and occupation goes here -->
<div id="top" 
    style="height: 25px;">
    <span style="font-family: Arial, Verdana, 'Sans Serif'; font-size: 22; color: #464646;"><strong>Dean Grobler</strong>, Programmer</span>
</div>

<!-- Website link and email adress goes here -->
<div id="bottom" 
    style="font-family: Arial, Verdana, 'Sans Serif';
           font-size: 14px;
           color: #464646;
           padding: 5px;
           height: 25px;">
    <a href="http://www.deangrobler.com" style="text-decoration: none; color: #84d5f6">www.deangrobler.com</a> | 
    <a href="mailto:dean@deangrobler.com" style="text-decoration: none; color: #84d5f6">dean@deangrobler.com</a> 
</div>

在Thunderbird和我的浏览器中，它显示正常：

enter image description here

但是不幸的是，在Outlook 2010中它没有显示正确：

enter image description here

如果它使用与IE相同的渲染引擎，我打赌它确实使用了，我对此并不感到太惊讶。

有什么想法吗？

- user818700

尝试使用绝对路径添加图片，例如 http://your.domain.com/image.path/logo.png。 - javabeangrinder

@javabeangrinder - 感谢你的提示。我可以很快解决图像问题，但这里的布局才是问题所在... :\ - user818700

1

很抱歉，你需要再次使用<table>标签。希望这个页面能对你有所帮助：http://www.campaignmonitor.com/css/ - Marco

我认为你的布局问题与图像未加载有关，因此它没有占据固定空间。即使加载了图像，你的文本行是否仍然在图像下方？ - Ioana O

@Ioana O - 是的，即使图像加载完成，布局仍然保持不变。必须记住，包含图像的div具有固定的宽度和高度50px;因此，无论是否有图像，它都将呈现相同的效果。 :) - user818700

1

是的，非常抱歉，我没有仔细查看发布的HTML代码.... - Ioana O

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dom Walker · Accepted Answer

邮件客户端无法像浏览器一样渲染HTML。在创建HTML电子邮件时，最好使用表格。我知道这与所有现代网页设计背道而驰，但是它们得到了更多邮件客户端的支持。以下链接是CSS属性及其被哪些客户端支持的列表。

http://www.campaignmonitor.com/css/