html - 邮件设计在 mailchimp 模板中工作，但不适用于邮件客户端
问题描述
我在 mailchimp 中创建了一个模板，自己编写了具有各自样式的 html。在 mailchip 模板查看器中一切正常。但是在邮件客户端看到结果的那一刻，有些样式被忽略了。在模板中，我使用图像作为背景，并在其上叠加一些文本和 div 元素，使用绝对位置。在邮件客户端中，这些位置被忽略，内容显示为单列。有没有人对此有任何解决方案？
提前致谢。
我附上了实现的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xxxxxxxxxxxxxxxxxxxxxx</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
</head>
<body>
<div>
<div id="coverImg" style="background-color:black;opacity:.15;width:650px;height:890px;position:absolute;z-index:1;"></div>
<img id="fondoImg" style="position:absolute;z-index:0;width:650px;" src="imageURL1" alt="fa94319f-53fe-4c6a-b34b-8660dfb1ba28.jpg">
<h1 id="tituloTxt" style="position:absolute;z-index:2;font-size:40px;top:27px;left:275px;">
<strong>XXXXXXXXXXXX</strong> <br> XXXXXXXXXX</h1>
<div id="containerText">
<p>XXXXXX: *|NOMBRE|*</p>
<p>XXXXX *|VALORADEUD|*.</p>
<p style="text-align:center;">XXXXXXXXX</p>
<center>
<a href="randomURL</a>
<br>
<br>
<div style="margin-top:50px;">
<h3 class="lista" style="display:inline;">XXXXXX: </h3> <h3 style="display:inline;">
*|CEDULA_RUC|*
</h3>
</div>
<br>
<div style="display:inline;">
<h3 class="lista" style="display:inline;">XXXXXXX: </h3> <h3 style="display:inline;"> *|NOMBRE|*
</h3>
</div>
<br>
<br>
<div style="display:inline;">
<h3 class="lista" style="display:inline;">XXXXXXX: </h3> <h3 style="display:inline;">*|VALORADEUD|*</h3>
</div>
</center>
</div>
<p id="txt1">xxxxxxxxxx,</p>
<p id="txt2">xxxxxxxxxx <br> xxxxxxxxxxxx</p>
</div>
<style type="text/css">
body{
font-family:'PT Sans Narrow',sans-serif;
}
#fondoImg{
position:absolute;
z-index:0;
width:650px;
}
#coverImg{
background-color:black;
opacity:.15;
width:650px;
height:890px;
position:absolute;
z-index:1;
}
#tituloTxt{
position:absolute;
z-index:2;
font-size:40px;
top:27px;
left:275px;
}
#containerText{
position:absolute;
z-index:1;
top:200px;
left:45px;
height:470px;
width:530px;
background-color:white;
padding-left:20px;
padding-right:20px;
text-align:justify;
}
#txt1{
position:absolute;
z-index:1;
color:white;
left:270px;
top:680px;
}
#txt2{
position:absolute;
z-index:1;
color:white;
left:185px;
top:710px;
text-align:center;
font-weight:bold;
}
.lista{
color:red;
}
</style>
</body>
</html>