Question

我正在努力处理这段代码。我创建了此标头，该标头基本上由具有2行的表组成，这是我们想做的事情：

阴影（cid：img-headerbg的底部）必须在底部（如何更改cid：img-headerbg应用于表格？）
如何消除此间隙，使黄线位于底部？

这是我的标题：

    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: {{accent_color}};">
        <tr>
            <td background="cid:img-headerbg" bgcolor="{{accent_color}}" valign="bottom" style="background-color:{{accent_color}};background-image: url('cid:img-headerbg');background-size:100% 100%; background-repeat:repeat-x; background-position: top left;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                  <v:fill type="frame" size="100%,100%" src="cid:img-headerbg" color="#eb847b" />
                  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                <![endif]-->
                <div style="max-width: 680px; margin: 0 auto;">
                    <!--[if mso]>
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
                    <tr>
                    <td>
                    <![endif]-->
                    <table style="border:0;border-collapse:collapse;margin:0 auto;padding:0" align="center" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="30">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td style="margin:0 auto;padding:0;text-align:center;" align="center" width="100%">
                                <a href="{{base_url}}" style="display: block; top: 0; outline: medium none; text-align: center; text-decoration: none; margin:0 auto;" align="center">
                                    <img alt="{{company_name}}" label="{{company_name}}" src="cid:img-logo" style="border: 0px; display: block; max-width: 100%; max-height: 100%; margin:0 auto;" />
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td style="color:#ffffff;font-family:'Roboto','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;line-height:25px;margin:0 auto;padding:15px 0;text-align:center;text-decoration:none" align="center" width="100%">
                                {{header_title}}<br />
                                <small>{{header_subtitle}}</small>
                            </td>
                        </tr>
                    </table>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </div>
                <!--[if gte mso 9]>
                  </v:textbox>
                </v:rect>
                <![endif]-->
            </td>
        </tr>
        <tr>
            <td background="cid:img-colour_stripe" bgcolor="{{primary_color}}" valign="bottom" style="background-color:{{primary_color}};background-image: url('cid:img-colour_stripe');background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                                <v:fill type="frame" size="100%,2px" style="background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;" src="cid:img-colour_stripe" color="#eb847b" />
                                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                              <![endif]-->
                <div style="max-width: 680px; margin: 0 auto;background-color: #ffffff;">
                    <!--[if mso]>
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center" bgcolor="#ffffff" style="margin: 0 auto;padding:0;">
                    <tr>
                    <td>
                    <![endif]-->
                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;">
                        <tr>
                            <td height="100%" valign="top" width="100%" style="padding: 10px 0; background-color: #ffffff;margin:0;"></td>
                        </tr>
                    </table>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </div>
                <!--[if gte mso 9]>
                  </v:textbox>
                </v:rect>
                <![endif]-->
            </td>
        </tr>
    </table>

Answer 1

由于我自己进行了一些研究，很高兴我找到了对我有用的修复程序： Outlook显然在vml形状之后添加了空段落，这导致了差距。我通过在父容器中添加font-size：0和line-height：0来解决此问题。

https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom

如何设置带有背景图片的电子邮件头？

1 个答案: