Outlook 不喜欢我的 HTML 签名答案

【问题标题】：Outlook doesn't like my HTML signatureOutlook 不喜欢我的 HTML 签名
【发布时间】：2015-05-01 05:46:18
【问题描述】：

我有一个 PSD，我已将其制作成 HTML 签名，但 Outlook (2013) 似乎不喜欢我的 HTML，在尝试实现签名后，格式全乱了，签名看起来很糟糕。

这是它应该的样子：http://theitguy.net.au/bowerbird/bowerbird-sig.html

如您所见，它在 Web 浏览器中看起来还不错，但 Outlook 似乎接受并破坏了它。

这是代码（请原谅，我不是 HTML 忍者）：

<div id = "body" style = "margin: 25px 50px;">
<div id = "logo" style = "float: left; display: block; margin-right: 30px; margin-bottom: 60px;"></div>
<h1 style = "color:#a2967d; font-family: georgia, serif; font-size: 16px; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; margin-left: 30px;">Catherine Heraghty</h1>
<div class = "text" ><span style = "color:#7a7a7a; font-family: century gothic, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; font-weight: normal;">creative director<br/>
m: 0410 525 401<br/>
p: 02 9531 2233<br/>
w: <a style = "color: #7a7a7a; text-decoration: none;" href = "http://bowerbirdinteriors.com.au">bowerbirdinteriors.com.au</a></span></div>
<div id = "social" style = "padding-top: 10px;">
	<a href = "http://bowerbirdinteriors.com.au"><img class = "social" src = "http://theitguy.net.au/bowerbird/Web.png" style = "padding-right: 20px;"></a>
	<a href = "http://bowerbirdinteriors.com.au/collections/"><img class = "social" src = "http://theitguy.net.au/bowerbird/Cart.png" style = "padding-right: 20px;"></a>
	<a href = "http://instagram.com/bowerbirdinteriors"><img class = "social" src = "http://theitguy.net.au/bowerbird/instagram.png" style = "padding-right: 20px;"></a>
	<a href = "http://www.facebook.com/bowerbirdinteriorstyling?fref=ts"><img class = "social" src = "http://theitguy.net.au/bowerbird/facebook.png" style = "padding-right: 20px;"></a>
	<a href = "http://www.pinterest.com/bowerbird/"><img class = "social" src = "http://theitguy.net.au/bowerbird/pinterest.png" style = "padding-right: 20px;"></a>
</div>
</div>

任何有关如何使此 Outlook 兼容的帮助将非常感谢！

【问题讨论】：

标签： html outlook

【解决方案1】：

Outlook 并不完全是 HTML 合规性的堡垒，它呈现 HTML 代码的方式与基于 Webkit 的浏览器不同。

如果您希望 Outlook 能够很好地使用它，最好的办法是使用（喘气）表重写您的签名。

【讨论】：

【解决方案2】：

检查以下您期望的结果：

.demo{
  color:#7a7a7a;
  font-family: century gothic, sans-serif; 
  font-size: 13px; 
  font-weight: normal; 
  line-height: 20px; 
  font-weight: normal;
  }

.rightdiv{
  margin-left:30px;
  }

<div id = "body" style = "margin: 25px 50px;">
  
<div id = "logo" style = "float: left; display: block; margin-right: 30px; margin-bottom: 60px;"></div>
  <div class="rightdiv">
<h1 style = "color:#a2967d; font-family: georgia, serif; font-size: 16px; font-weight: normal; text-transform: uppercase; letter-spacing: 2px;">Catherine Heraghty</h1>
<div class = "text" ><span class="demo">creative director<br/></span><span class="demo">
m: 0410 525 401<br/></span><span class="demo">
p: 02 9531 2233<br/></span><span class="demo">
w: <a style = "color: #7a7a7a; text-decoration: none;" href = "http://bowerbirdinteriors.com.au">bowerbirdinteriors.com.au</a></span></div>
<div id = "social" style = "padding-top: 10px;">
	<a href = "http://bowerbirdinteriors.com.au"><img class = "social" src = "http://theitguy.net.au/bowerbird/Web.png" style = "padding-right: 20px;"></a>
	<a href = "http://bowerbirdinteriors.com.au/collections/"><img class = "social" src = "http://theitguy.net.au/bowerbird/Cart.png" style = "padding-right: 20px;"></a>
	<a href = "http://instagram.com/bowerbirdinteriors"><img class = "social" src = "http://theitguy.net.au/bowerbird/instagram.png" style = "padding-right: 20px;"></a>
	<a href = "http://www.facebook.com/bowerbirdinteriorstyling?fref=ts"><img class = "social" src = "http://theitguy.net.au/bowerbird/facebook.png" style = "padding-right: 20px;"></a>
	<a href = "http://www.pinterest.com/bowerbird/"><img class = "social" src = "http://theitguy.net.au/bowerbird/pinterest.png" style = "padding-right: 20px;"></a>
</div>
</div>
  </div>

希望对你有帮助。

【讨论】：