【问题标题】:Sending HTML through Email - Formatting issue通过电子邮件发送 HTML - 格式问题
【发布时间】:2014-10-29 12:20:19
【问题描述】:

我想通过电子邮件发送几个不同的 HTML 文件(不是作为附件,而是作为 HTML 电子邮件)。现在这些 HTML 文件包含不同类型的组件,如图像、表格、图表、线条、不同格式的文本。这些元素的对齐方式是混合的。有些是绝对的,有些是相对的。它在浏览器中按预期显示正常..当我尝试通过电子邮件发送它时,问题就出现了,在电子邮件中(在 Gmail 上测试),文本和元素的格式到处都是..它完全失去了它的形式和也不显示某些元素。我希望它在电子邮件中以相同的形式显示,并在浏览器中显示。示例 HTML 是:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body style="background-color:black"> 
<!--     Page 1    -->  
<div style="background-color:white; position:relative; margin-left:auto; margin-right:auto; width:595pt; height:842pt; overflow:hidden; "> 
<div style="position:absolute; top:25.4922pt; left:35pt; font-family:Times New Roman; font-weight:Bold; font-style:Italic; font-size:14pt; color:rgb(40,191,56); white-space:pre-wrap;">1291 CrocoDoc Lane
</div> 
<div style="position:absolute; top:22.0195pt; left:226pt; font-family:Arial; font-weight:Bold; font-size:14pt; color:rgb(255,0,0); white-space:pre-wrap;">Its beautiful Pakistan.
</div> 
<div style="position:absolute; top:24.4609pt; left:443pt; font-family:Arial; font-weight:Regular; font-size:16pt; color:rgb(0,0,0); white-space:pre-wrap;">1291 crocodoc lane
</div> 
<!--    LINE     -->  
<div style="position:absolute; top:43.291pt; left:443pt; width:139.641pt; height:2pt; background-color:rgb(0,0,0); "></div> 
<div style="position:absolute; top:105pt; left:103pt;"> 
    <img src="Images\ELAINE.png" style="width:186pt; height:99pt;"> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 175.19 58.3792 A 32.64 32.64 0 0 1 176.64 68 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 170.968 49.6132 A 32.64 32.64 0 0 1 175.19 58.3792 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 164.351 42.481 A 32.64 32.64 0 0 1 170.968 49.6132 L 144 68 " style="fill:rgb(155,187,89);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 155.925 37.6163 A 32.64 32.64 0 0 1 164.351 42.481 L 144 68 " style="fill:rgb(128,100,162);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 146.439 35.4513 A 32.64 32.64 0 0 1 155.925 37.6163 L 144 68 " style="fill:rgb(65,152,175);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 136.737 36.1784 A 32.64 32.64 0 0 1 146.439 35.4513 L 144 68 " style="fill:rgb(219,132,61);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 127.68 39.7329 A 32.64 32.64 0 0 1 136.737 36.1784 L 144 68 " style="fill:rgb(147,169,207);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 120.073 45.7992 A 32.64 32.64 0 0 1 127.68 39.7329 L 144 68 " style="fill:rgb(209,147,146);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 114.592 53.8381 A 32.64 32.64 0 0 1 120.073 45.7992 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 111.725 63.1353 A 32.64 32.64 0 0 1 114.592 53.8381 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 111.725 72.8648 A 32.64 32.64 0 0 1 111.725 63.1353 L 144 68 " style="fill:rgb(155,187,89);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 114.592 82.162 A 32.64 32.64 0 0 1 111.725 72.8648 L 144 68 " style="fill:rgb(128,100,162);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 120.073 90.2009 A 32.64 32.64 0 0 1 114.592 82.162 L 144 68 " style="fill:rgb(65,152,175);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 127.68 96.2671 A 32.64 32.64 0 0 1 120.073 90.2009 L 144 68 " style="fill:rgb(219,132,61);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 136.737 99.8217 A 32.64 32.64 0 0 1 127.68 96.2671 L 144 68 " style="fill:rgb(147,169,207);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 146.439 100.549 A 32.64 32.64 0 0 1 136.737 99.8217 L 144 68 " style="fill:rgb(209,147,146);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 155.925 98.3837 A 32.64 32.64 0 0 1 146.439 100.549 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 164.351 93.519 A 32.64 32.64 0 0 1 155.925 98.3837 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 170.968 86.3867 A 32.64 32.64 0 0 1 164.351 93.519 L 144 68 " style="fill:rgb(155,187,89);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 175.19 77.6208 A 32.64 32.64 0 0 1 170.968 86.3867 L 144 68 " style="fill:rgb(128,100,162);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 176.64 68 A 32.64 32.64 0 0 1 175.19 77.6208 L 144 68 " style="fill:rgb(65,152,175);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:147.869pt; left:470.441pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:144.383pt; left:469.366pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:141.368pt; left:467.31pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:139.093pt; left:464.458pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:137.76pt; left:461.062pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:137.488pt; left:457.423pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:138.299pt; left:453.866pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:140.124pt; left:450.706pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:142.798pt; left:448.225pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:146.086pt; left:446.642pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:149.693pt; left:446.098pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:153.301pt; left:446.642pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:156.588pt; left:448.225pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:159.263pt; left:450.706pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:161.087pt; left:453.866pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:161.899pt; left:457.423pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:161.626pt; left:461.062pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:160.294pt; left:464.458pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:158.019pt; left:467.31pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:155.004pt; left:469.366pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:151.518pt; left:470.441pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div> 
<div style="position:absolute; top:103.895pt; left:357pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">19940630
</div> 
<div style="position:absolute; top:222pt; left:37pt;"> 
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAADwAQMAAAD1ip/oAAAAA1BMVEX///+nxBvIAAAAEnRFWHRUaXRsZQBCYXIgY29kZSBQTkegthbWAAAACnRFWHRBdXRob3IASERGosqhsgAAAKNJREFUeJztzYsJwDAIBUA36P7bOFjABhv6IyMcSHiaBxcjYhzVk1XZa4d5WV+/nHGXV34613G+c6LLn87LCjAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8HgPXwCutCUztm+BWQAAAAASUVORK5CYII=" style="width:526pt; height:102pt;"> 
</div> 
<!--    RECTANGLE     -->  
<div style="position:absolute; top:350pt; left:39pt; width:178pt; height:82pt; border:1pt solid; border-color:rgb(0,0,0);background-color:rgb(40,191,56);"></div> 
<!--    LINE     -->  
<div style="position:absolute; top:396pt; left:253pt; width:153pt; height:1pt; background-color:rgb(199,74,220); "></div> 
<div style="position:absolute; top:335.5pt; left:427.5pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<ellipse cx="85.6667" cy="72.6667" rx="85" ry="72" style="fill:rgb(255,0,0);stroke-width:1pt; stroke:rgb(0,0,0)"/> 
</svg> 
</div> 
</div> 
<div style="background-color:black; position:relative; height:6pt; width:auto;"> </div> 
<!--     Page 2    -->  
<div style="background-color:white; position:relative; margin-left:auto; margin-right:auto; width:595pt; height:842pt; overflow:hidden; "> 
<div style="position:absolute; top:22.0195pt; left:226pt; font-family:Arial; font-weight:Bold; font-size:14pt; color:rgb(255,0,0); white-space:pre-wrap;">Its beautiful Pakistan.
</div> 
<div style="position:absolute; top:24.4609pt; left:443pt; font-family:Arial; font-weight:Regular; font-size:16pt; color:rgb(0,0,0); white-space:pre-wrap;">1240 crocodoc lane
</div> 
<!--    LINE     -->  
<div style="position:absolute; top:43.291pt; left:443pt; width:139.641pt; height:2pt; background-color:rgb(0,0,0); "></div> 
<div style="position:absolute; top:105pt; left:103pt;"> 
    <img src="Images\ELAINE.png" style="width:186pt; height:99pt;"> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 111.36 67.9998 A 32.64 32.64 0 0 1 176.64 68 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 176.64 68 A 32.64 32.64 0 1 1 111.36 67.9998 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:137.453pt; left:455.842pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">50%
</div> 
<div style="position:absolute; top:161.933pt; left:455.842pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">50%
</div> 
<div style="position:absolute; top:103.895pt; left:357pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">19940630
</div> 
<div style="position:absolute; top:222pt; left:37pt;"> 
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAADwAQMAAAD1ip/oAAAAA1BMVEX///+nxBvIAAAAEnRFWHRUaXRsZQBCYXIgY29kZSBQTkegthbWAAAACnRFWHRBdXRob3IASERGosqhsgAAAKBJREFUeJztzdEJwDAIBUA36P7bOFjANhJCGzrCQT5enuLFiBhX9cuq7G+Hp1mjI2fs5ZV3P8uj/9x8WQEGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAY/A/fpnc9ndGJuV4AAAAASUVORK5CYII=" style="width:526pt; height:102pt;"> 
</div> 
<!--    RECTANGLE     -->  
<div style="position:absolute; top:350pt; left:39pt; width:178pt; height:82pt; border:1pt solid; border-color:rgb(0,0,0);background-color:rgb(40,191,56);"></div> 
<!--    LINE     -->  
<div style="position:absolute; top:396pt; left:253pt; width:153pt; height:1pt; background-color:rgb(199,74,220); "></div> 
<div style="position:absolute; top:335.5pt; left:427.5pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<ellipse cx="85.6667" cy="72.6667" rx="85" ry="72" style="fill:rgb(255,0,0);stroke-width:1pt; stroke:rgb(0,0,0)"/> 
</svg> 
</div> 
</div> 
<div style="background-color:black; position:relative; height:6pt; width:auto;"> </div> 
<!--     Page 3    -->  
<div style="background-color:white; position:relative; margin-left:auto; margin-right:auto; width:595pt; height:842pt; overflow:hidden; "> 
<div style="position:absolute; top:25.4922pt; left:35pt; font-family:Times New Roman; font-weight:Bold; font-style:Italic; font-size:14pt; color:rgb(40,191,56); white-space:pre-wrap;">1230 CrocoDoc Lane
</div> 
<div style="position:absolute; top:22.0195pt; left:226pt; font-family:Arial; font-weight:Bold; font-size:14pt; color:rgb(255,0,0); white-space:pre-wrap;">Its beautiful Pakistan.
</div> 
<div style="position:absolute; top:24.4609pt; left:443pt; font-family:Arial; font-weight:Regular; font-size:16pt; color:rgb(0,0,0); white-space:pre-wrap;">1230 crocodoc lane
</div> 
<!--    LINE     -->  
<div style="position:absolute; top:43.291pt; left:443pt; width:139.641pt; height:2pt; background-color:rgb(0,0,0); "></div> 
<div style="position:absolute; top:105pt; left:103pt;"> 
    <img src="Images\ELAINE.png" style="width:186pt; height:99pt;"> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 154.086 36.9575 A 32.64 32.64 0 0 1 176.64 68 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 117.594 48.8146 A 32.64 32.64 0 0 1 154.086 36.9576 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 117.594 87.1853 A 32.64 32.64 0 0 1 117.594 48.8146 L 144 68 " style="fill:rgb(155,187,89);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 154.086 99.0425 A 32.64 32.64 0 0 1 117.594 87.1853 L 144 68 " style="fill:rgb(128,100,162);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<path d="M 144 68 L 176.64 68 A 32.64 32.64 0 0 1 154.086 99.0425 L 144 68 " style="fill:rgb(65,152,175);stroke-width:0;" />
</svg> 
</div> 
<div style="position:absolute; top:142.499pt; left:465.744pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div> 
<div style="position:absolute; top:138.052pt; left:452.059pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div> 
<div style="position:absolute; top:149.693pt; left:443.602pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div> 
<div style="position:absolute; top:161.334pt; left:452.059pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div> 
<div style="position:absolute; top:156.888pt; left:465.744pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div> 
<div style="position:absolute; top:103.895pt; left:357pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">19940630
</div> 
<div style="position:absolute; top:222pt; left:37pt;"> 
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAADwAQMAAAD1ip/oAAAAA1BMVEX///+nxBvIAAAAEnRFWHRUaXRsZQBCYXIgY29kZSBQTkegthbWAAAACnRFWHRBdXRob3IASERGosqhsgAAAKNJREFUeJztzdEJwDAIBUA36P7bOFggbUyQUjrCgR8vT8nFiBjXrMk5s54VnuasPjmjj0/ufpV7+p89UQdvK8BgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaD/+Ebn0mPLCMI9gAAAAAASUVORK5CYII=" style="width:526pt; height:102pt;"> 
</div> 
<!--    RECTANGLE     -->  
<div style="position:absolute; top:350pt; left:39pt; width:178pt; height:82pt; border:1pt solid; border-color:rgb(0,0,0);background-color:rgb(40,191,56);"></div> 
<!--    LINE     -->  
<div style="position:absolute; top:396pt; left:253pt; width:153pt; height:1pt; background-color:rgb(199,74,220); "></div> 
<div style="position:absolute; top:335.5pt; left:427.5pt; width:100%; height:100% "> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> 
<ellipse cx="85.6667" cy="72.6667" rx="85" ry="72" style="fill:rgb(255,0,0);stroke-width:1pt; stroke:rgb(0,0,0)"/> 
</svg> 
</div> 
</div> 
<div style="background-color:black; position:relative; height:6pt; width:auto;"> </div> 
</body> 
</html> 

我正在使用PutsMail 将其作为 html 电子邮件发送到我的收件箱。我知道一定有一些问题,它不会像在浏览器中那样完全显示,但令人惊讶的是,我真的找不到一些解决方案来解决这个问题。任何帮助,将不胜感激。谢谢

【问题讨论】:

    标签: javascript html css email


    【解决方案1】:

    电子邮件客户端因支持 CSS 和 HTML 而无处不在。您确实必须像 1990 年代的网站一样构建它,使用表格、br 等。Campaign Monitor 对电子邮件客户端及其支持的元素有一个非常好的指南。我会从那里开始供您参考。 https://www.campaignmonitor.com/css/

    从电子邮件模板开始也可能很有用。 Zurb 在http://zurb.com/playground/responsive-email-templates 和http://zurb.com/ink/templates.php 有一些不错的。

    【讨论】:

    • 谢谢.. 非常有用的链接,我可以看到 Gmail 和 Outlook 不支持 Position/top/left/right 属性,Gmail 不允许 HTML 中的图片...弄清楚如何以编程方式为所有这些客户设计它:/
    【解决方案2】:

    说实话,您可能需要稍微更改一下您的页面。正如您很快发现的那样,电子邮件客户端(尤其是 Gmail)不支持完整的 HTML。我特别关心你的 SVG 元素。

    我建议(作为第一步)将 SVG 转换为图像(PNG 可能是最好的),然后看看您还需要做多少工作。

    下一步是造型。 https://www.campaignmonitor.com/css/ 提供了一个很好的列表,列出了您可以在电子邮件中使用哪些 CSS,但对于许多电子邮件客户端而言,您不能使用外部样式表,但必须使用标签。

    祝你好运!

    【讨论】:

    • 谢谢.. 非常有用的链接,我可以看到 Gmail 和 Outlook 不支持 Position/top/left/right 属性,Gmail 不允许 HTML 中的图片...弄清楚如何以编程方式为所有这些客户设计它:/
    猜你喜欢
    • 2013-01-20
    • 1970-01-01
    • 2022-10-23
    • 2020-04-29
    • 2021-08-29
    • 2013-10-28
    • 2014-04-25
    • 2020-11-05
    • 2010-11-26
    相关资源
    最近更新 更多