EDIT我已经实现了html作为一个签名,但问题我现在有非常奇怪。
我有一个签名,每次我把它从outlook发送到一个网络邮件服务outlook把标签在html和混乱的所有间距。我该怎么解决呢?
- 我有一个关于Outlook签名的问题。我的工作是制作一个签名,使其看起来更专业。我做了一个测试,看看我需要如何将其实现到签名的HTML中,但我不太明白。*
这是Outlook生成的代码:
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:-520092929 1073786111 9 0 415 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
p.MsoAutoSig, li.MsoAutoSig, div.MsoAutoSig
{mso-style-priority:99;
mso-style-link:"E-mailhandtekening Char";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
span.E-mailhandtekeningChar
{mso-style-name:"E-mailhandtekening Char";
mso-style-priority:99;
mso-style-unhide:no;
mso-style-locked:yes;
mso-style-link:E-mailhandtekening;}
.MsoChpDefault
{mso-style-type:export-only;
mso-default-props:yes;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
@page WordSection1
{size:595.3pt 841.9pt;
margin:70.85pt 70.85pt 70.85pt 70.85pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.WordSection1
{page:WordSection1;}
-->
</style>
</head>
<body lang=NL style='tab-interval:35.4pt'>
<div class=WordSection1>
<p class=MsoAutoSig><span style='mso-fareast-font-family:Calibri;mso-fareast-theme-font:
minor-latin'><o:p> </o:p></span></p>
</div>
</body>
</html>
我真的不明白我应该把代码放在哪里。这是我的代码:
<style>
a {
text-decoration: none;
color: inherit;
}
.wrapper {
width:50%;
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}
.topText {
font-size: 11pt;
margin-bottom: 5px;
}
.topLine {
border-top: 2px solid #C80032;
margin-bottom: 5px;
}
.content {
height:100px;
width: 100%;
margin-bottom: 5px;
}
p {
font-size:10pt;
}
.left-content {
float:left;
margin-right: 140px;
}
.right-content {
}
.name {
margin: 0px !important;
float: left;
}
.address {
margin: 0px 0px 0px 20px;
}
.address_A {
margin: 0px 0px 0px 30px;
}
.address_M {
margin: 0px 0px 0px 14px;
}
.bottomBar {
float: right;
width:74.5%;
height: 25px;
background-color:#7F7B7B;
color: white;
font-size: 12pt;
text-align: left;
margin-left: 18px;
}
.tableStyle{
margin-bottom: 5px;
}
.social-Blocks
{
background-color:white;
width: 25px !important;
height: 25px !important;
float:left;
margin-left: 15px;
text-align:center;
font-size: 23px;
color: #0987B2;
}
.bottom-bar-first{
float: left;
width:11%;
height: 25px;
background-color:#7F7B7B;
color: white;
font-size: 12pt;
}
.bottom_Span{
margin-left: 10px;
}
.suplaconLogo{
height:90px ;
width:190px;
}
.logo{
float: right;
}
</style>
<link rel="stylesheet" href="style.css"></head>
<div class="wrapper">
<div class="topText">Met vriendelijke groet,</div>
<div class="topLine"></div>
<img class="logo" src="images/logo.png" height="80" width="350">
<table class="tableStyle" cellpadding="0">
<tr>
<td><span><strong>Information</strong></span></td><td><span class="address_A"><strong>Information</strong></span></td>
</tr>
<tr>
<td><span class="name">T</span><span class="address"> Information</span></td>
<td><span class="address_A">Information</span></td>
</tr>
<tr>
<td><span class="name">M</span><span class="address_M">Information</span></td>
<td><span class="address_A">Information</span></td>
</tr>
<tr>
<td><span class="name">E</span><span class="address">Information </span></td>
<td><span class="address_A"><a href="">Information</a></span></td>
</tr>
</table>
<div class="bottomStyle">
<div class="bottom-bar-first"></div>
<div class="social-Blocks"><a href="
"><span class="icon-linkedin center" target="blank"></span></a></div>
<div class="social-Blocks"><a href="" target="blank"><span class="icon-facebook2 center"></span></a></div>
<div class="social-Blocks"><a href="" target="blank"><img src="" height="25"></a></div>
<div class="bottomBar"><span class="bottom_Span"><strong> Information</strong></span></div>
</div>
</div>
我怎样才能包括我的代码在Outlook的代码,或者我需要把我的代码?我发现了这个,似乎我的CSS确实是兼容的:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
5条答案
按热度按时间yxyvkwin1#
链接到一个外部样式表是不支持几乎所有的电子邮件客户端(当然Outlook不支持它)。
所以我建议您将所有内容都放在
head > style
标记中toe950272#
我对Outlook签名的最佳做法(即使听起来很恶心)是在MS Word中设置签名的样式,并将此文本块粘贴到选项中的Outlook签名框中。
我会避免在Outlook中使用自己的自定义CSS。
qq24tv8q3#
1.把你所有的样式内联,这应该可以解决你的大部分问题,例如:
ffvjumwh4#
想象一下,到了2023年,微软365 / Office 365 Outlook仍然没有对HTML/CSS的任何支持,看到像微软这样的公司不能给予这个伟大的更新,真的很难过。
eblbsuwk5#
好吧,Outlook糟透了。它就是不支持很多CSS。而且无论是桌面客户端还是网络邮件版本,甚至是hotmail或msn邮件,你都会得到不同的结果。
此链接提供了一些有关支持/不支持的内容的信息。例如,您不能在Outlook中浮动。
https://www.campaignmonitor.com/css/
你也应该使用内联样式,而不是外部链接,甚至在头部包含一个样式块,这样它们就不会被剥离。这里有一个工具可以自动做到这一点。
http://inliner.cm/
基本上,由于缺乏CSS支持,您需要为Microsoft简化它。