通过电子邮件发送HTML-格式问题
Sending HTML through Email - Formatting issue
我有一些不同的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电子邮件发送到我的收件箱。我知道一定有一些问题，它不会完全显示在浏览器中，但令人惊讶的是，我真的找不到一些解决方案来解决这个问题。如有任何帮助，我们将不胜感激。感谢
电子邮件客户端对CSS和HTML的支持无处不在。你真的必须像20世纪90年代的网站一样构建它，使用表格、br等。Campaign Monitor有一个关于电子邮件客户端及其支持的元素的非常好的指南。我会从那里开始为你做参考。https://www.campaignmonitor.com/css/
从电子邮件模板开始可能也很有用。Zurb在http://zurb.com/playground/responsive-email-templates和http://zurb.com/ink/templates.php.
老实说，您可能需要稍微更改一下页面。正如你很快发现的那样，电子邮件客户端（尤其是Gmail）不支持完整的HTML。我特别关心您的SVG元素。
我建议（作为第一步）将SVG转换为图像（PNG可能是最好的），看看你还需要做多少工作
下一步将是造型。https://www.campaignmonitor.com/css/给出了一个很好的列表，列出了你可以在电子邮件中使用的CSS，但对于许多电子邮件客户端来说，你不能使用外部样式表，但必须使用标记。
祝你好运！
相关文章：
- PHP:显示sqlite数据库中的html格式数据，使用tinymce保存
- JavaScript生成html格式的密码
- 如何在angularjs中实现html格式的字符串
- 如何重写Javascript If语句以选择Classes而不是ID's的HTML格式
- 如何使用JQUERY解析大型XML文件并将其可视化为HTML格式
- 正则表达式，用于从html格式的字符串中提取文本
- 表单中的CSS、HTML格式
- 以 HTML 格式预加载图像
- 如何使用 Ajax 以 html 格式呈现没有布局的 Rails 操作
- 使用JSONPjquery获取HTML格式的XML数据
- 如何在angular js中从github获取原始自述文件后将其转换为html格式的文档
- 从字面上看，以HTML格式输出PHP代码
- 循环多维数组并以 html 格式显示数据
- 从单选按钮中获取值以选择 html 格式的图像
- 以 HTML 格式显示计算结果 (javascript）
- 在 SciTE 中测试和编辑 JavaScript(独立和 HTML 格式）
- 从另一个网页以 HTML 格式通过电子邮件发送当前购物车
- HTML 保留字符串与 html 格式
- 导入 html 格式的外部 js 文件
- 如何使用多子对象值构建 angularjs html 格式
