图像旁边的时事通讯文本的模板代码 - 与某些电子邮件客户端的兼容性问题

Posted 2023-03-24

【中文标题】图像旁边的时事通讯文本的模板代码 - 与某些电子邮件客户端的兼容性问题

【英文标题】：Template Code for Newsletter Text next to image - Compatibility Issues with some email clients

【发布时间】：2020-04-16 08:10:12

【问题描述】：

我正在尝试创建一个电子邮件模板，用于每周一次通过 mailchimp 发送 rss 帖子。 我遇到了问题，但并非所有电子邮件客户端都出现问题。 我需要在图像旁边显示文本（在 PC 上）和图像下的文本（在较小的设备上），我的代码就是这样做的，但由于某种原因，在 Thunderbird 上它显示错误。

我编辑了代码，以显示有效的代码。

  <div class="mcnTextContent">
    <style type="text/css">
      .testsitenewsletterimage11 p 
        float: left !important;
      
      .testsitenewslettertxt11 p 
        display: inline-block!important;
        padding-left: 20px;
        width: 50%;
      
      .testsitenewslettertxt11 hr 
        width: 100% !important;
      
         .endfeedrss 
        display: block!important;
               clear: both;

      
        .testsitenewsletterstart 
        display: block!important;
      

      .im 
        color: #757575 !important;
      

    </style>

   <div class="testsitenewsletterstart">
       *|FEEDBLOCK:http://testsite.edu.gr/category/%CE%B5%CE%BA%CF%80%CE%B1%CE%B9%CE%B4%CE%B5%CF%85%CF%84%CE%B9%CE%BA%CE%B1-%CE%BD%CE%B5%CE%B1/feed/|*
    *|FEEDITEMS:[$count=3]|*
    <div class="testsitenewsletterimage11">

      <p><a href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a></p>
      <div class="testsitenewslettertxt11">
        <p>
          <span style="font-size:14px">*|FEEDITEM:DATE|*</span><br />
          <strong>*|FEEDITEM:TITLE|* </strong><br />
          <a href="*|FEEDITEM:URL|*">???? &Mu;ά&theta;&epsilon;&tau;&epsilon;
            &Pi;&epsilon;&rho;&iota;&sigma;&sigma;ό&tau;&epsilon;&rho;&alpha;</a>
            <br />
        </p>


      </div>

    </div>
          <span class="endfeedrss"> 
          <hr /> <br />
    *|END:FEEDITEMS|* *|END:FEEDBLOCK|*
       </span>
      </div>


  </div>

我想在PC上实现的目标：https://imgur.com/rtEYN0E 雷鸟问题（PC）：https://imgur.com/oLPRG0k

谁能告诉我如何解决雷鸟的问题？我无法调试，因为我不知道如何在 Firefox“元素检查器”中检查雷鸟电子邮件代码

谢谢

【参考方案1】：

试试这个。我没有在 Thunderbird 中测试它的选项。 我更改了 br 标签和他的班级的顺序。

    <div class="mcnTextContent">
      <style type="text/css">
        .testsitenewsletterimage11 p 
          float: left !important;
        
        .testsitenewslettertxt11 p 
          display: inline !important;
          padding-left: 20px;
          width: 50%;
        
        .testsitenewslettertxt11 hr 
          width: 100% !important;
        
        .im 
          color: #757575 !important;
        
      </style>

      *|FEEDBLOCK:http://testsite.edu.gr/category/%CE%B5%CE%BA%CF%80%CE%B1%CE%B9%CE%B4%CE%B5%CF%85%CF%84%CE%B9%CE%BA%CE%B1-%CE%BD%CE%B5%CE%B1/feed/|*
      *|FEEDITEMS:[$count=3]|*
      <div class="testsitenewsletterimage11">
        <p><a href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a></p>
        <div class="testsitenewslettertxt11">
          <p>
            <span style="font-size:14px">*|FEEDITEM:DATE|*</span><br />
            <strong>*|FEEDITEM:TITLE|* </strong><br />
            <a href="*|FEEDITEM:URL|*">? &Mu;ά&theta;&epsilon;&tau;&epsilon;
              &Pi;&epsilon;&rho;&iota;&sigma;&sigma;ό&tau;&epsilon;&rho;&alpha;</a
            ><br />
          </p>
          <hr />
        </div>
      </div>
      *|END:FEEDITEMS|* *|END:FEEDBLOCK|*
    </div>

【讨论】：

不幸的是，它在 Thunderbird 上做了同样的事情。见截图imgur.com/XRpiy7L

通过设置一个新的跨度类“endfeedrss”并添加“clear: both;”解决了这个问题给它。

此方法在 Outlook 中无法正常工作。 Outlook 仅将 div 读取为块元素。