HTML电子邮件签名不会向下移动
问题描述 投票：1回答：4
我已经使用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="[email protected]"><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规则？
4个回答
2
投票
投票
问题不仅在于外部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="[email protected]"><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>
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="[email protected]"><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>1
投票
投票
这是因为您要在absolute上设置relative位置而不是<div>。用absolute替换relative应该可以解决问题。
另一方面，您始终可以将其导出为PNG文件并将其附加到电子邮件中。
1
投票
投票
更新的第一个位置：绝对位置：相对。经过测试，可以正常工作。
<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="[email protected]"><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>
最新问题
- 如何在日期列上使用 PIVOT 函数编写动态 SQL 查询
- 从 java 中的 Futures 列表中收集结果
- 将今天的日期设置为 Google 表格中最近添加的工作表的名称
- 如何更改填充的显示顺序
- 需要表的更新语句
- LangChain.js无法获取代币消耗和费用
- 如何使用 gradle 配置 TomEE 实例？
- 动态长度中的参考蜡烛太多（Pinescript/Tradingview）
- React 未在表单上设置状态值
- Google 表格在同一单元格中为自身增加价值
- 单击 Recyclerview 上的项目时发生转换
- 使用 Nuxt3 中 @types 文件夹中的打字稿类型
- select2 多值仅在 POST 中发送一个值
- Authorize.net Iframe 未在我的网站中呈现
- 如何使用UUID维护插入顺序
- 通过在Python中从Excel读取时区数据来制作时间序列
- Google 应用脚本未发送电子邮件通知
- 使用gg.gap后添加图例
- Django、stripe 和 webhook ：{"error": "缺少 stripe 签名"}
- 构建流程以使用 Power Automate 将数据从 Dataverse 表移动到 Azure Blob 存储
© www.soinside.com 2019 - 2024. All rights reserved.