HTML电子邮件签名不会向下移动

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML电子邮件签名不会向下移动相关的知识，希望对你有一定的参考价值。

我已经使用Adobe Illustrator创建了以下html电子邮件签名，并从中渲染了HTML。现在，当我在邮件应用程序中导入此文件时，它不会在输入的新行中向下移动，而是停留在该行中，并且我的单词被其重叠。Words overlapped

这里是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规则？

答案

问题不仅在于外部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>
另一答案

将父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>
另一答案

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

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

另一答案

更新的第一个位置：绝对位置：相对。经过测试，可以正常工作。

<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电子邮件签名不会向下移动的主要内容，如果未能解决你的问题，请参考以下文章

手绘电子签名（Signature Pad）

TLS协议扫盲（握手，非对称加密，证书，电子签名等）

pdf电子签名怎么签？

vue使用canvas画布实现电子版签名

vue使用canvas画布实现电子版签名

vue使用canvas画布实现电子版签名