HTML电子邮件模板发际线

发布于 2025-01-24 07:10:02 字数 2295 浏览 4 评论 0原文

我有一个带有不同块背景颜色的电子邮件模板,因此,颜色在流血并在块之间创建线条 我尝试了我发现的所有解决方案,什么也没奏效,经过数小时的挖掘,我认为问题是嵌套表比他们的父表短一些,

您可以看到问题,我的意思是稍微短的(橙色正在显示)白色在其中,如果是相同的高度,则不会显示橙色):

,这是一个块之一的代码:

<div>
      <table
        align="center"
        border="0"
        cellpadding="0"
        cellspacing="0"
        style="margin: 0; padding: 0; background:{$cordial-variable}; border-collapse: collapse;"
        bgcolor="{$cordial-variable}"
        width="100%"
      >
        <tr>
          <td align="center" valign="top">
            <table
              width="700"
              bgcolor="#fcfcfc"
              border="0"
              cellspacing="0"
              cellpadding="0"
              style="
                mso-table-rspace: 0pt;
                mso-table-lspace: 0pt;
                border-collapse: collapse;
                border: 0;
                width: 100%;
                height: auto;
                padding: 0;
              "
            >
              <tr>
                <td align="center" valign="top">
                  <div>
                    <table
                      width="600"
                      border="0"
                      cellspacing="0"
                      cellpadding="0"
                      style="
                        mso-table-rspace: 0pt;
                        mso-table-lspace: 0pt;
                        border-collapse: collapse;
                        border: 0;
                        padding: 0;
                        width: 80%;
                        height: auto;
                      "
                    >
                      <tr>
                        <td style="35px" height="35"></td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>

我尝试的内容:为所有表和TDS设置背景颜色,为所有TR设置VELIGN,将高度更改为偶数值,而不是奇数,而不是奇数用0行高和字体大小设置图像,将高度设置为100%而不是自动。

还有其他建议吗?

I have an email template with different block background colors, and because of this the colors are bleeding and creating lines between the blocks
I tried all the solutions I found and nothing worked, and after hours of digging I think the problem is that the nested tables are slightly shorter than their parent tables

here you can see the problem and what I mean by slightly shorter (the orange is showing and the white is within it, if it was the same height no orange will be showing):
enter image description here

and this is the code for one of the blocks:

<div>
      <table
        align="center"
        border="0"
        cellpadding="0"
        cellspacing="0"
        style="margin: 0; padding: 0; background:{$cordial-variable}; border-collapse: collapse;"
        bgcolor="{$cordial-variable}"
        width="100%"
      >
        <tr>
          <td align="center" valign="top">
            <table
              width="700"
              bgcolor="#fcfcfc"
              border="0"
              cellspacing="0"
              cellpadding="0"
              style="
                mso-table-rspace: 0pt;
                mso-table-lspace: 0pt;
                border-collapse: collapse;
                border: 0;
                width: 100%;
                height: auto;
                padding: 0;
              "
            >
              <tr>
                <td align="center" valign="top">
                  <div>
                    <table
                      width="600"
                      border="0"
                      cellspacing="0"
                      cellpadding="0"
                      style="
                        mso-table-rspace: 0pt;
                        mso-table-lspace: 0pt;
                        border-collapse: collapse;
                        border: 0;
                        padding: 0;
                        width: 80%;
                        height: auto;
                      "
                    >
                      <tr>
                        <td style="35px" height="35"></td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>

the things I tried: setting background color for all tables and tds, setting valign for all trs, changing the heights to even values instead of odd ones, setting the images with 0 line-height and font-size, setting the height to 100% instead of auto.

Any further suggestions?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

月下伊人醉 2025-01-31 07:10:02

要获得一个特定高度,请兼容交叉电子邮件,您只需要以下操作:

<tr>
    <td style="padding:35px 0 0 0;font-size:0;line-height: 0;"> </td>
</tr>

注意&amp; nbsp;您没有的 - 部分电子邮件客户端将添加它,然后使用默认值字体大小或线条高。

您拥有的第一个&lt; table是可以的:细胞板,细胞间隙和边框为零,这应该足够。

&lt; div&gt; s不需要。

To get a block a specific height, cross email compatible, you need only this:

<tr>
    <td style="padding:35px 0 0 0;font-size:0;line-height: 0;"> </td>
</tr>

Note the   which you don't have--some email clients will add that in and then use a default font-size or line-height on it.

The first <table> you have is fine: cellpadding, cellspacing and border are zeroed and that should be enough.

<div>s are not needed.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文