HTML邮箱签名没有下移

Question

我使用 Adobe Illustrator 创建了以下 HTML 电子邮件签名，并从中渲染了 HTML。现在，当我在邮件应用程序中导入它时，它不会在输入的新行上向下移动，它会停留在那里并且我的话会被它重叠。

这里是HTML签名的代码：

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:absolute; left:0px; top:0px; width:280px; height:104px;">
    <div style="background-image:url(https://dl.dropbox.com/s/d9o4u9f9zjr3agu/dino_01.png?dl=0); position:absolute; left:0px; top:0px; width:280px; height:1px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/o44ty8kq5u4jcfm/dino_02.png?dl=0); position:absolute; left:0px; top:1px; width:112px; height:103px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/m8yjqdnvzt8jqzc/dino_03.png?dl=0); position:absolute; left:112px; top:1px; width:168px; height:42px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/hmq89agn8l0p54h/dino_04.png?dl=0); position:absolute; left:112px; top:43px; width:39px; height:60px;" title="">
    </div>
    <a href="db@itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/mr69z622cd3zr1g/dino_05.png?dl=0); position:absolute; left:151px; top:43px; width:128px; height:14px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/jw9d0cydnvujunp/dino_06.png?dl=0); position:absolute; left:279px; top:43px; width:1px; height:61px;" title="">
    </div>
    <a href="tel:021-722-3332 "><div style="background-image:url(https://dl.dropbox.com/s/vl4lysbqrfxkf2b/dino_07.png?dl=0); position:absolute; left:151px; top:57px; width:128px; height:12px;" title="">
    </div></a>
    <a href="dl.itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/wlgzyuo7x4rheki/dino_08.png?dl=0); position:absolute; left:151px; top:69px; width:127px; height:35px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/3w02m6h0cue91un/dino_09.png?dl=0); position:absolute; left:278px; top:69px; width:1px; height:35px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/65eeqjtnt5sl14v/dino_10.png?dl=0); position:absolute; left:112px; top:103px; width:39px; height:1px;" title="">
    </div>
</div>
</body>

请让我知道这里是否缺少任何 CSS 规则？

Answer 1

这是因为您为 <div> 设置了 absolute 位置而不是 relative。将 absolute 替换为 relative 应该可以解决问题。

另一方面，您始终可以将其导出为 PNG 文件并将其附加到您的电子邮件中。

Answer 2

将父级设为 div relative 而不是 absolute。

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Test text

<!-- parent div -->
<div style="position:relative; left:0px; top:0px; width:280px; height:104px;">
    <div style="background-image:url(https://dl.dropbox.com/s/d9o4u9f9zjr3agu/dino_01.png?dl=0); position:absolute; left:0px; top:0px; width:280px; height:1px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/o44ty8kq5u4jcfm/dino_02.png?dl=0); position:absolute; left:0px; top:1px; width:112px; height:103px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/m8yjqdnvzt8jqzc/dino_03.png?dl=0); position:absolute; left:112px; top:1px; width:168px; height:42px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/hmq89agn8l0p54h/dino_04.png?dl=0); position:absolute; left:112px; top:43px; width:39px; height:60px;" title="">
    </div>
    <a href="db@itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/mr69z622cd3zr1g/dino_05.png?dl=0); position:absolute; left:151px; top:43px; width:128px; height:14px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/jw9d0cydnvujunp/dino_06.png?dl=0); position:absolute; left:279px; top:43px; width:1px; height:61px;" title="">
    </div>
    <a href="tel:021-722-3332 "><div style="background-image:url(https://dl.dropbox.com/s/vl4lysbqrfxkf2b/dino_07.png?dl=0); position:absolute; left:151px; top:57px; width:128px; height:12px;" title="">
    </div></a>
    <a href="dl.itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/wlgzyuo7x4rheki/dino_08.png?dl=0); position:absolute; left:151px; top:69px; width:127px; height:35px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/3w02m6h0cue91un/dino_09.png?dl=0); position:absolute; left:278px; top:69px; width:1px; height:35px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/65eeqjtnt5sl14v/dino_10.png?dl=0); position:absolute; left:112px; top:103px; width:39px; height:1px;" title="">
    </div>
</div>
</body>

Answer 3

问题不仅在于外部 div 被绝对定位，而且内部 div 也被绝对定位。这意味着外部 div 需要 position:relative 才能使内部 div 的位置相对于它，而不是邮件正文。我也不认为您需要 body 标签 - 我删除了它，但如果这让事情看起来很奇怪，您可以将其重新添加。

<div style="position:relative; width:280px; height:104px;">
    <div style="background-image:url(https://dl.dropbox.com/s/d9o4u9f9zjr3agu/dino_01.png?dl=0); position:absolute; left:0px; top:0px; width:280px; height:1px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/o44ty8kq5u4jcfm/dino_02.png?dl=0); position:absolute; left:0px; top:1px; width:112px; height:103px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/m8yjqdnvzt8jqzc/dino_03.png?dl=0); position:absolute; left:112px; top:1px; width:168px; height:42px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/hmq89agn8l0p54h/dino_04.png?dl=0); position:absolute; left:112px; top:43px; width:39px; height:60px;" title="">
    </div>
    <a href="db@itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/mr69z622cd3zr1g/dino_05.png?dl=0); position:absolute; left:151px; top:43px; width:128px; height:14px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/jw9d0cydnvujunp/dino_06.png?dl=0); position:absolute; left:279px; top:43px; width:1px; height:61px;" title="">
    </div>
    <a href="tel:021-722-3332 "><div style="background-image:url(https://dl.dropbox.com/s/vl4lysbqrfxkf2b/dino_07.png?dl=0); position:absolute; left:151px; top:57px; width:128px; height:12px;" title="">
    </div></a>
    <a href="dl.itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/wlgzyuo7x4rheki/dino_08.png?dl=0); position:absolute; left:151px; top:69px; width:127px; height:35px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/3w02m6h0cue91un/dino_09.png?dl=0); position:absolute; left:278px; top:69px; width:1px; height:35px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/65eeqjtnt5sl14v/dino_10.png?dl=0); position:absolute; left:112px; top:103px; width:39px; height:1px;" title="">
    </div>
</div>

Answer 4

先 position:absolute 更新为 position:relative。测试成功。

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:relative; left:0px; top:0px; width:280px; height:104px;">
    <div style="background-image:url(https://dl.dropbox.com/s/d9o4u9f9zjr3agu/dino_01.png?dl=0); position:absolute; left:0px; top:0px; width:280px; height:1px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/o44ty8kq5u4jcfm/dino_02.png?dl=0); position:absolute; left:0px; top:1px; width:112px; height:103px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/m8yjqdnvzt8jqzc/dino_03.png?dl=0); position:absolute; left:112px; top:1px; width:168px; height:42px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/hmq89agn8l0p54h/dino_04.png?dl=0); position:absolute; left:112px; top:43px; width:39px; height:60px;" title="">
    </div>
    <a href="db@itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/mr69z622cd3zr1g/dino_05.png?dl=0); position:absolute; left:151px; top:43px; width:128px; height:14px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/jw9d0cydnvujunp/dino_06.png?dl=0); position:absolute; left:279px; top:43px; width:1px; height:61px;" title="">
    </div>
    <a href="tel:021-722-3332 "><div style="background-image:url(https://dl.dropbox.com/s/vl4lysbqrfxkf2b/dino_07.png?dl=0); position:absolute; left:151px; top:57px; width:128px; height:12px;" title="">
    </div></a>
    <a href="dl.itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/wlgzyuo7x4rheki/dino_08.png?dl=0); position:absolute; left:151px; top:69px; width:127px; height:35px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/3w02m6h0cue91un/dino_09.png?dl=0); position:absolute; left:278px; top:69px; width:1px; height:35px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/65eeqjtnt5sl14v/dino_10.png?dl=0); position:absolute; left:112px; top:103px; width:39px; height:1px;" title="">
    </div>
</div>
</body>

HTML邮箱签名没有下移

HTML Email signature does not move down

html

css

adobe-illustrator