HTML位置：绝对的电子邮件签名
[英]HTML position:absolute, e-mail signature
问题描述
I know that probably position will not work on many platforms as an e-mail signature, but I want to fix another problem: when I start typing text in the e-mail, the text slowly goes bellow the signature, instead of "pushing" it away to the bottom (he text gathers over it and not above it). 
我知道，在许多平台上，作为电子邮件签名，位置可能不起作用，但是我想解决另一个问题：当我开始在电子邮件中键入文本时，文本会慢慢进入签名之下，而不是“推送”它移到底部（他的文字聚集在其上方而不是上方）。 How can I fix it? 我该如何解决？ enter image description here 在此处输入图片说明
<html> <head> <title>sig-noborders</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div style="position:absolute; left:0px; top:0px; width:1312px; height:612px;"> <div style="background-image:url(sig-noborders_01.png); position:absolute; left:0px; top:0px; width:1312px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_02.png); position:absolute; left:0px; top:126px; width:146px; height:486px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_03.png~original); position:absolute; left:146px; top:126px; width:374px; height:370px;" title=""> </div> <div style="background-image:url(sig-noborders_04.png); position:absolute; left:520px; top:126px; width:160px; height:255px;" title=""> </div> <a href="http://benjaminjayshand.com" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_05.png~original); position:absolute; left:680px; top:126px; width:31px; height:30px;" title=""> </div></a> <div style="background-image:url(sig-noborders_06.png); position:absolute; left:711px; top:126px; width:601px; height:3px;" title=""> </div> <div style="background-image:url(sig-noborders_07.png); position:absolute; left:711px; top:129px; width:59px; height:252px;" title=""> </div> <a href="http://benjaminjayshand.com" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_08.png~original); position:absolute; left:770px; top:129px; width:352px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_09.png); position:absolute; left:1122px; top:129px; width:190px; height:167px;" title=""> </div> <div style="background-image:url(sig-noborders_10.png); position:absolute; left:770px; top:154px; width:352px; height:58px;" title=""> </div> <div style="background-image:url(sig-noborders_11.png); position:absolute; left:680px; top:156px; width:31px; height:53px;" title=""> </div> <div style="background-image:url(sig-noborders_12.png); position:absolute; left:680px; top:209px; width:2px; height:84px;" title=""> </div> <a href="http://designtel.co" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_13.png~original); position:absolute; left:682px; top:209px; width:27px; height:29px;" title=""> </div></a> <div style="background-image:url(sig-noborders_14.png); position:absolute; left:709px; top:209px; width:2px; height:84px;" title=""> </div> <a href="http://designtel.co" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_15.png~original); position:absolute; left:770px; top:212px; width:220px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_16.png); position:absolute; left:990px; top:212px; width:132px; height:84px;" title=""> </div> <div style="background-image:url(sig-noborders_17.png); position:absolute; left:770px; top:237px; width:220px; height:59px;" title=""> </div> <div style="background-image:url(sig-noborders_18.png); position:absolute; left:682px; top:238px; width:27px; height:55px;" title=""> </div> <div style="background-image:url(sig-noborders_19.png); position:absolute; left:680px; top:293px; width:1px; height:88px;" title=""> </div> <a href="https://www.instagram.com/benjaminjayshand/" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_20.png~original); position:absolute; left:681px; top:293px; width:30px; height:31px;" title=""> </div></a> <div style="background-image:url(sig-noborders_21.png); position:absolute; left:770px; top:296px; width:3px; height:86px;" title=""> </div> <a href="https://www.instagram.com/designtel" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_22.png~original); position:absolute; left:773px; top:296px; width:236px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_23.png); position:absolute; left:1009px; top:296px; width:33px; height:5px;" title=""> </div> <a href="https://www.instagram.com/designtel" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_24.png~original); position:absolute; left:1042px; top:296px; width:127px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_25.png); position:absolute; left:1169px; top:296px; width:143px; height:316px;" title=""> </div> <div style="background-image:url(sig-noborders_26.png); position:absolute; left:1009px; top:301px; width:9px; height:81px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_27.png~original); position:absolute; left:1018px; top:301px; width:13px; height:14px;" title=""> </div> <div style="background-image:url(sig-noborders_28.png); position:absolute; left:1031px; top:301px; width:11px; height:81px;" title=""> </div> <div style="background-image:url(sig-noborders_29.png); position:absolute; left:1018px; top:315px; width:13px; height:67px;" title=""> </div> <div style="background-image:url(sig-noborders_30.png); position:absolute; left:773px; top:321px; width:236px; height:61px;" title=""> </div> <div style="background-image:url(sig-noborders_31.png); position:absolute; left:1042px; top:321px; width:127px; height:61px;" title=""> </div> <div style="background-image:url(sig-noborders_32.png); position:absolute; left:681px; top:324px; width:30px; height:57px;" title=""> </div> <div style="background-image:url(sig-noborders_33.png); position:absolute; left:520px; top:381px; width:159px; height:231px;" title=""> </div> <a href="mailto:info@benjaminjayshand.com"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_34.png~original); position:absolute; left:679px; top:381px; width:33px; height:27px;" title=""> </div></a> <div style="background-image:url(sig-noborders_35.png); position:absolute; left:712px; top:381px; width:58px; height:1px;" title=""> </div> <div style="background-image:url(sig-noborders_36.png); position:absolute; left:712px; top:382px; width:57px; height:89px;" title=""> </div> <a href="mailto:info@benjaminjayshand.com"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_37.png~original); position:absolute; left:769px; top:382px; width:340px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_38.png); position:absolute; left:1109px; top:382px; width:60px; height:230px;" title=""> </div> <div style="background-image:url(sig-noborders_39.png); position:absolute; left:769px; top:407px; width:340px; height:62px;" title=""> </div> <div style="background-image:url(sig-noborders_40.png); position:absolute; left:679px; top:408px; width:33px; height:63px;" title=""> </div> <div style="background-image:url(sig-noborders_41.png); position:absolute; left:769px; top:469px; width:1px; height:143px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_42.png~original); position:absolute; left:770px; top:469px; width:156px; height:19px;" title=""> </div> <div style="background-image:url(sig-noborders_43.png); position:absolute; left:926px; top:469px; width:183px; height:143px;" title=""> </div> <div style="background-image:url(sig-noborders_44.png); position:absolute; left:679px; top:471px; width:1px; height:9px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_45.png~original); position:absolute; left:680px; top:471px; width:33px; height:8px;" title=""> </div> <div style="background-image:url(sig-noborders_46.png); position:absolute; left:713px; top:471px; width:56px; height:141px;" title=""> </div> <div style="background-image:url(sig-noborders_47.png); position:absolute; left:680px; top:479px; width:33px; height:1px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_48.png~original); position:absolute; left:679px; top:480px; width:11px; height:6px;" title=""> </div> <div style="background-image:url(sig-noborders_49.png); position:absolute; left:690px; top:480px; width:12px; height:132px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_50.png~original); position:absolute; left:702px; top:480px; width:11px; height:6px;" title=""> </div> <div style="background-image:url(sig-noborders_51.png); position:absolute; left:679px; top:486px; width:11px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_52.png); position:absolute; left:702px; top:486px; width:11px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_53.png); position:absolute; left:770px; top:488px; width:156px; height:124px;" title=""> </div> <div style="background-image:url(sig-noborders_54.png); position:absolute; left:146px; top:496px; width:374px; height:116px;" title=""> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2016-03-30 11:40:27
the text is overlapping/going below the signature due to the mass absolute positioning of elements within the html signature. 由于html签名中元素的质量绝对定位，因此文本在签名下方重叠/移动。
i'd strongly recommend using simpler html table's as you will be able to achieve the desired layout as well as a cross client solution. 我强烈建议使用更简单的html表，因为您将能够实现所需的布局以及跨客户端解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
响应式HTML电子邮件签名 - Responsive HTML E-mail Signature
电子邮件签名 - E-Mail Signature
gmail对HTML电子邮件签名的处理方式不同 - HTML e-mail signature is disaplayed differently by gmail
样式化HTML电子邮件 - Styling HTML e-mail
使用PHP的HTML电子邮件 - HTML e-mail with PHP
发送HTML电子邮件 - Sending HTML e-mail
HTML电子邮件表格 - HTML E-mail form
HTML电子邮件模板 - HTML e-mail template
HTML电子邮件作为文件附件 - HTML E-Mail as fileattachment
使用 HTML/CSS 从移动屏幕上的电子邮件签名中的链接中删除下划线 - Remove underline from link in e-mail signature on mobile screen with HTML/CSS
相关标签