签名未按预期显示

时间:2017-10-13 09:35:13

标签: html outlook

我创建了一个HTML签名

<html>

<head>
<style type="text/css">
#acc {
width:700px;
margin-top: 5px;
border-top: solid red 1px;
padding-top:5px;
overflow:hidden;
}
#last{
float:right;
margin-top: 1px;
}
#blast{
margin-left: 10px;
}
#second{

}
#main{
width:700px;
height:300px;
}
#logo{
z-index:50;
position:absolute;
top:50px;
}
#bg{
z-index:1;
}
#green{
color:green;
margin-bottom:10px;
}
#footer{
margin-top:10px;
width:700px;
font-size:12px;
color:gray;
}
</style>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<div id="main">
<a href="http://romero.group"><img id="bg" src="https://i.gyazo.com/86c63547132c53e29202725bb83381a1.png" width="700" height="230" alt=""></a>



<div id="acc">
<img src="http://www.manorsidejoinery.co.uk/wp-content/uploads/2017/02/CHAS-acreddited-contractor.jpg" width="220" height="140" alt="">
<img id="second" src="https://www.buildingcentre.co.uk/system/images/images/000/066/507/original/Worksafe-contractor-Log1.jpg?1455634903" width="220" height="140" alt="">
<img id="blast" src="https://i.gyazo.com/8b787ac125b5ebad1a75b620a86346df.png" width="110" height="140" alt="">
<img id="last" src="https://i.gyazo.com/c3d58119498dcc3223b1bf20070f6f4b.jpg" width="110" height="140" alt="">
</div>
<div id="footer">
<div id="green"><img src="https://i.gyazo.com/cde8ee05016520b0c7a753954c6a887e.png">Please consider the environment before printing this email message.</div>
This E-mail and any attachments are intended only for the individual or company to which it is addressed and any may contain information which is privileged, confidential and prohibited from disclosure or unauthorized use under applicable law. If you have received this email by mistake please notify <a href="mailto:james@romerointeriors.co.uk" target="_top">james@romerointeriors.co.uk</a> immediately. 
</br></br>
Romero Interiors is a Limited company registered in England and Wales | Registration number: 06923001 | Registered office: Solar House, 282 Chase Road, London, N14 6NZ
</div>
<!-- End Save for Web Slices -->
</body>
</html>

当我在浏览器上测试它时,按预期显示:

  

image

它在我的电子邮件中按预期显示,当我通过电子邮件发送到我的Hotmail时,它的工作正常。

不幸的是,在Outlook 2016中,当收到电子邮件时,签名被搞砸了,看起来像这样:

  

image

任何人都知道为什么它只在outlook中显示不同?如您所见,红色边框及其下方的文字都跳出了框,最后一张认证图像没有按预期浮动。

1 个答案:

答案 0 :(得分:0)

不幸的是,这些类型的奇怪问题在不同的webmail /电子邮件提供商和嵌入式内容中非常常见。您应该明白,即使您使用Outlook 2016修复此问题,您也可能遇到其他服务的问题,或者您的修补程序甚至可能在将来突然停止工作(如果/当服务提供商对其代码进行更改时)。

话虽如此,看来2016年的前景可能存在一个错误,即您的保证金申报需要有资金&#39; M&#39;让他们正常工作(参见:https://www.emailonacid.com/blog/article/email-development/tips_and_tricks_outlook.com)。

此外,应用于div的浮动宽度和位置CSS样式在Outlook中不起作用。您可能希望尝试使用表格。

祝你好运!