Question

我已经在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>

邮件设计可在mailchimp模板中使用，但不能在邮件客户端中使用

0 个答案: