发送Outlook 2016响应电子邮件签名

时间:2020-01-22 08:59:36

标签: html outlook-2016

因此,我有一个html签名,可在Mac Mail和其他现代浏览器上正常使用,但对于Outlook 2016,则是一团糟。这是因为Outlook 2016仍使用Word HTML呈现引擎。我知道。

无论如何,在签名页脚中带有横幅的情况下,它会完全失去响应能力。

有人知道发生了什么事吗?

  • 出于隐私原因,我已使用占位符图像并将文本更改为lorem ipsum

在没有横幅的模板下方找到。

  • 当我将尺寸调整为移动宽度时,这3张图像会彼此接触。
<!--[if mso]>
    <table border="0" cellspacing="0" cellpadding="0"><tr><td width="650">
<![endif]-->
<div style="max-width: 650px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="text-12 pb-35" style="font-size:12px; line-height:16px; color:#000001; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; padding-bottom: 35px;">
                Kind regards,
                <br /><br />

                <strong>Lorem Ipsum</strong>
                <br />
                Lorem Ipsum
                <br /><br />

                M <a href="tel:+XXX" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">+Lorem Ipsum</span></a>
            </td>
        </tr>
        <tr>
            <td class="pb-25" style="border-bottom: 1px solid #404040; padding-bottom: 25px;">
                <div class="box" style="float: left; display: inline;">
                    <table width="290" align="left" class="box-inner" valign="top" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; float: left; width: 290px;">
                        <tr>
                            <td class="img" width="290" style="font-size:0pt; line-height:0pt; text-align:left;">
                                <a href="#" target="_blank">
                                    <img src="https://placeimg.com/460/88" width="230" height="44" border="0" alt="" />
                                </a>
                            </td>
                            <td class="img" width="30" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                        </tr>
                    </table>
                </div>
                <div class="box" style="float: left; display: inline;">
                    <table align="left" class="box-inner" valign="top" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; float: left;">
                        <tr>
                            <td class="pt-20" style="padding-top: 20px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            <a href="#" target="_blank" class="link" style="color:#000001; text-decoration:none;"><span class="link nowrap" style="color:#000001; text-decoration:none; white-space:nowrap;">
                                                Lorem Ipsum 1
                                                <br />
                                                Lorem Ipsum
                                            </span></a>
                                        </td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="1" bgcolor="#404040" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            T <a href="tel:+#" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">+Lorem Ipsum</span></a>
                                            <br />
                                            <a href="mailto:#" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">Lorem Ipsum</span></a>
                                        </td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="1" bgcolor="#404040" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            <a href="#" target="_blank" class="link" style="color:#000001; text-decoration:none;"><span class="link nowrap" style="color:#000001; text-decoration:none; white-space:nowrap;">Lorem Ipsum</span></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td align="left" class="py-10" style="padding-top: 10px; padding-bottom: 10px;">
                <div class="box" style="float: left; display: inline;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="pt-15" style="padding-top: 15px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="bottom" class="img" width="158" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/318/58" width="159" height="29" style="width: 100%; max-width: 159px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/318/58" width="159" style="width: 100%; max-width: 159px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="1" bgcolor="#7f7f7f" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="bottom" class="img" width="138" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/274/80" width="137" height="40" style="width: 100%; max-width: 137px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/274/80" width="137" style="width: 100%; max-width: 137px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="1" bgcolor="#7f7f7f" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="bottom" class="img" width="85" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/170/58" width="85" height="29" style="width: 100%; max-width: 85px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/170/58" width="85" style="width: 100%; max-width: 85px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>      
            </td>
        </tr>


        <tr>
            <td class="text-9 c-grey" style="font-size:9px; line-height:13px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#808080;">
                <strong>Disclaimer</strong>
                <br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </td>
        </tr>
    </table>
</div>
<!--[if mso]>
    </td></tr></table>
<![endif]--> 

在带有横幅的模板下方找到。这会使人完全失去反应。我认为这是因为横幅宽度650(这是整个电子邮件的最大宽度)。

有人知道如何做出回应吗?因此,每个示例图像在Outlook 2016上的宽度为100%。

<!--[if mso]>
    <table border="0" cellspacing="0" cellpadding="0"><tr><td width="650">
<![endif]-->
<div style="max-width: 650px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="text-12 pb-35" style="font-size:12px; line-height:16px; color:#000001; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; padding-bottom: 35px;">
                Kind regards,
                <br /><br />

                <strong>Lorem Ipsum</strong>
                <br />
                Lorem Ipsum
                <br /><br />

                M <a href="tel:+XXX" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">+Lorem Ipsum</span></a>
            </td>
        </tr>
        <tr>
            <td class="pb-25" style="border-bottom: 1px solid #404040; padding-bottom: 25px;">
                <div class="box" style="float: left; display: inline;">
                    <table width="290" align="left" class="box-inner" valign="top" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; float: left; width: 290px;">
                        <tr>
                            <td class="img" width="290" style="font-size:0pt; line-height:0pt; text-align:left;">
                                <a href="#" target="_blank">
                                    <img src="https://placeimg.com/460/88" width="230" height="44" border="0" alt="" />
                                </a>
                            </td>
                            <td class="img" width="30" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                        </tr>
                    </table>
                </div>
                <div class="box" style="float: left; display: inline;">
                    <table align="left" class="box-inner" valign="top" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; float: left;">
                        <tr>
                            <td class="pt-20" style="padding-top: 20px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            <a href="#" target="_blank" class="link" style="color:#000001; text-decoration:none;"><span class="link nowrap" style="color:#000001; text-decoration:none; white-space:nowrap;">
                                                Lorem Ipsum 1
                                                <br />
                                                Lorem Ipsum
                                            </span></a>
                                        </td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="1" bgcolor="#404040" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            T <a href="tel:+#" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">+Lorem Ipsum</span></a>
                                            <br />
                                            <a href="mailto:#" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">Lorem Ipsum</span></a>
                                        </td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="1" bgcolor="#404040" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            <a href="#" target="_blank" class="link" style="color:#000001; text-decoration:none;"><span class="link nowrap" style="color:#000001; text-decoration:none; white-space:nowrap;">Lorem Ipsum</span></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td align="left" class="py-10" style="padding-top: 10px; padding-bottom: 10px;">
                <div class="box" style="float: left; display: inline;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="pt-15" style="padding-top: 15px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="bottom" class="img" width="158" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/318/58" width="159" height="29" style="width: 100%; max-width: 159px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/318/58" width="159" style="width: 100%; max-width: 159px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="1" bgcolor="#7f7f7f" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="bottom" class="img" width="138" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/274/80" width="137" height="40" style="width: 100%; max-width: 137px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/274/80" width="137" style="width: 100%; max-width: 137px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="1" bgcolor="#7f7f7f" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="bottom" class="img" width="85" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/170/58" width="85" height="29" style="width: 100%; max-width: 85px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/170/58" width="85" style="width: 100%; max-width: 85px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>      
            </td>
        </tr>

        <tr>
            <td class="fluid-img pb-25" style="font-size:0pt; line-height:0pt; text-align:left; padding-bottom: 25px;">

                <a href="#" target="_blank">
                    <!--[if mso]>
                        <img src="https://placeimg.com/1302/332" width="651" height="166" style="width: 100%; width:100;max-width: 651px;" border="0" alt="Lore Ipsum" />
                    <![endif]-->
                    <!--[if !mso]> <!---->
                        <img src="https://placeimg.com/1302/332" width="651" style="width: 100%; max-width: 651px;" border="0" alt="Lore Ipsum" />
                    <!-- <![endif]-->

                </a>
            </td>
        </tr>

        <tr>
            <td class="text-9 c-grey" style="font-size:9px; line-height:13px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#808080;">
                <strong>Disclaimer</strong>
                <br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </td>
        </tr>
    </table>
</div>
<!--[if mso]>
    </td></tr></table>
<![endif]--> 

0 个答案:

没有答案