通過電子郵件發送HTML - 格式問題

我有幾個不同的HTML文件，我想發送到電子郵件（不作爲附件，但作爲HTML電子郵件）。現在，這些HTML文件包含不同類型的組件，如圖像，表格，圖表，線條，不同格式的文本。這些元素的排列是混合的..一些絕對的，一些相對的。它顯示在瀏覽器中的正常預期..當我嘗試通過電子郵件發送它時，問題出現了，在電子郵件中（在Gmail上測試過）文本和元素的格式遍佈整個地方..它完全失去了它的形式，也不要顯示一些元素。我希望它在電子郵件中以相同的形式顯示，並在瀏覽器中顯示。樣本HTML是：通過電子郵件發送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電子郵件。我知道必須有一些問題，它不會像在瀏覽器中一樣顯示，但令人驚訝的是，我不能真正找到解決此問題的一些解決方案。任何幫助，將不勝感激。謝謝

來源

2014-10-29 Abdul Jabbar

電子郵件客戶端都支持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。

來源

2014-10-29 04:12:59

謝謝..非常有用的鏈接，我可以看到Gmail和Outlook不支持位置/頂部/左/右的屬性和Gmail不允許HTML中的圖像...這將是一團糟試圖弄清楚如何設計它爲所有這些客戶編程︰/ – 2014-10-29 04:35:19

說實話，你可能不得不改變你的網頁的一點點。正如你很快發現的那樣，電子郵件客戶端（特別是Gmail）不支持完整的HTML。我特別關心你的SVG元素。

我建議（作爲第一步）將SVG轉換爲圖像（PNG可能是最好的），並看看您需要做多少工作。

下一步是造型。 https://www.campaignmonitor.com/css/給出了一個非常好的列表，可以在電子郵件中使用哪些CSS，但不是許多電子郵件客戶端的列表，您不能使用外部樣式表，但必須使用標籤。

祝你好運！

來源

2014-10-29 04:14:59 regdoug

謝謝..非常有用的鏈接，我可以看到Gmail和Outlook不支持位置/頂部/左/右的屬性和Gmail不允許HTML中的圖像...這將是一個爛攤子瞭解如何以編程方式爲所有這些客戶設計：/ – 2014-10-29 04:35:46

通過電子郵件發送HTML - 格式問題

回答

相關問題