在 Outlook 签名中包含自己的 html 和 css

【问题标题】：include own html and css in outlook signature在 Outlook 签名中包含自己的 html 和 css
【发布时间】：2015-07-05 18:26:39
【问题描述】：

编辑 我已经将 html 实现为签名，但我现在遇到的问题很奇怪。

我有一个签名，每次我将其从 Outlook 发送到 Web 邮件服务 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>&nbsp;</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

【问题讨论】：

    标签： html css outlook


    【解决方案1】：

    几乎所有电子邮件客户端都不支持链接到外部样式表（当然 Outlook 不支持它）。

    所以我建议你把所有东西都放在head &gt; style 标签中

    【讨论】：

    • 在您的源中缺少打开 head ，否则重新发布完整的源示例邮件
    【解决方案2】：

    我对 Outlook 签名的最佳做法（即使听起来很糟糕）是在 MS Word 中设置签名样式并将此文本块粘贴到选项中的 Outlook 签名框中。

    我会避免在 Outlook 中使用自己的自定义 CSS。

    【讨论】：

    • 你试过我的方法了吗？使用 Word 中的表格，您可以随心所欲地创建您的签名。然后将其复制到 Outlook 并让 Outlook 发挥作用。至少我会试试这个。
    • 是的，填充和其他内容仍然相同，Outlook 会在您保存签名时广告它
    • 添加的样式在问题中
    • 只是为了确定：您没有在您的 Word 签名中使用任何 css？它看起来不像您在 Outlook 中所期望的那样？
    【解决方案3】：
    1. 内联所有样式，这应该可以解决您的大部分问题，例如：

    1. 在 HTML 文件中包含您的代码
    2. 在浏览器中打开上述 HTML 文件
    3. 突出显示输出的签名并将其复制到剪贴板
    4. Google 如何在您的操作系统上为您的 Outlook 版本添加签名（例如，Outlook 2010 Windows）
    5. 粘贴到签名字段中
    6. 完成。你应该有一个值得称赞的跨客户签名

    顺便说一句，如果可以的话，我建议不要从 Word 复制和粘贴。

    【讨论】：

      【解决方案4】：

      好吧，Outlook 很糟糕。它只是不支持很多 CSS。而且无论是桌面客户端还是 webmail 版本，甚至是 hotmail 或 msn 邮件，你都会得到不同的结果。

      此链接提供了一些关于支持/不支持的信息。例如，您不能在 Outlook 中浮动。

      https://www.campaignmonitor.com/css/

      您还应该使用内联样式，而不是外部链接，甚至在头部包含样式块，这样它们就不会被剥离。这是一个可以自动执行此操作的工具。

      http://inliner.cm/

      基本上，由于缺乏 CSS 支持，您需要为 Microsoft 简化它。

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2013-01-16
        • 1970-01-01
        • 2019-07-07
        • 1970-01-01
        • 1970-01-01
        • 2019-03-09
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode