电子邮件中的图像问题

Question

所以我正在构建一个响应式电子邮件，它应该适用于基本上每个客户。电子邮件的结构如下：

---

|一些文字 |图片 |

|图片 |一些文字 |

注意：文本 td 是两行宽度的 2/3。

所以我的第一个问题是让 Outlook 在代码中在文本之前显示右侧的图像。浮动和对齐对此不起作用。所以我的修复是在除 Outlook 之外的任何地方添加条件代码（无论如何都不支持我的响应式设计），图像将在带有浮动的文本之前：对；在 Outlook 中，代码将在文本之后显示图像。

基本上就是这样，在 Gmail 中看起来相当不错，我测试的每个 Outlook 版本都让我很开心。但后来我到了outlook.com，我的梦想破灭了！由于某种原因，任何条件代码都被完全删除，所以我的图像没有显示。

我修复了我发现正在使用一些类并将 display:none 放在图像上，将 ecx 添加到类并让它显示:block。这解决了我在 outlook.com 中的问题，但是现在这两个图像都显示在 gmail 中，对于我来说，我无法弄清楚如何解决这个问题。

我知道我们都曾在某些时候遇到过响应式电子邮件和一般电子邮件，但这件事让我放弃了。有没有人可以解决这样的问题。

这将是一个示例代码：

<table align="center" class="container" style="border-collapse:collapse;" width="600">
<tbody>

    <tr style="margin:0 !important;">
        <td style="background-color:#CCDAE5">
        <table cellpadding="0" cellspacing="0" class="textAreaT" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt">
            <tbody style="margin:0 !important;">
                <tr style="margin:0 !important;">
                    <td class="centerTd" style="margin-right:15px; margin-bottom:0 !important; margin-top:0 !important; margin-left:-2px; mso-table-lspace:0pt; mso-table-rspace:0pt"><img height="186" src="some_URL" style="margin: -1px 15px -1px -1px; width:246px; height:186px;" width="246" /></td>
                    <td class="rightText" style="margin-right:10px; "><!--<h1>Did you has a blog?</h1>--><span style="font-face: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #004586;">Want to know what it<b>Schedule a campus tour today:</b><br />
                    &bull; See classes<br />
                    &bull; Speak with instructors <br />
                    &bull; Learn about </span><br />
                    &nbsp;</td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
    <tr style="margin:0; margin-top:-2px;">
        <td style="margin:0;">
        <table cellpadding="0" cellspacing="0" class="textAreaT" style="border-collapse:collapse;margin:0;">
            <tbody>
                <tr style="margin:0; margin-top:-2px"><!--[if !mso]><!-- -->
                    <td align="right" class="centerTd" style="margin-top:-3px; margin-right:-2px; margin-left:15px; float: right; margin-bottom:-2px; display: block"><img align="right" class="rightImg" height="186" src="some_URL2" style="margin: 2px 1px 1px 15px; width:246px; height:186px;" width="246" /></td>
                    <!--<![endif]-->
                    <td align="left" class="leftText" style="margin-left:10px; float:left; width:50%; margin-top: 32px; " width="300"><!--<h1> has a blog?</h1>--><span align="left" style="font-face: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #004586;">During your visit:<br />
                    &bull; Review options<br />
                    &bull; Ask questions and get answers in a one-on-one </span><br />
                    &nbsp;</td>
                    <!--[if gte mso 9]>
                    <td class="outYes" align="right" class="centerTd" style="display:none; margin-top:-3px !important; margin-right:-2px; margin-left:15px; float: right" >
                            <img align="right" width="246" height="186" class="rightImg" src="some_URL2" style="margin-top:-3px; margin-right0; margin-left:15px; width:246px; height:186px;" />
                    </td>
                    <![endif]-->
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>

感谢您的帮助！

Answer 1

我使用过这种方法。当我在 Acid 上通过 Email 运行此程序时，它表明 Outlook.com 和其他电子邮件客户端工作正常。

<table class="force-row main-story" width="100%" cellpadding="6" cellspacing="0" border="0" align="left" style="margin-left:0px;margin-right:0px;">
    <tbody>
        <tr>
           <td>
              <div>
                 <!-- ======= RECOMMENDATION ======= -->
                 <!-- 
                 ADD TRANSPARENCY OF ~10 PIXELS TO THE RIGHT OR LEFT OF AN IMAGE TO CREATE A MARGIN FROM THE TEXT THAT WRAPS AROUND THE IMAGE.  THIS IS NECESSARY BECAUSE SOME EMAIL CLIENTS WILL REMOVE MARGINS THAT ARE PART OF THE CSS STYLING.  TO INSURE MARGINS ARE CONSISTENT AROUND IMAGES, ADD MARGINS IN THE IMAGE BEFORE SAVING IT FOR THE WEB. 
                  -->      
                  <img alt="Placeholder Image" src="images/image-placeholder-150x150.gif" align="left" style="outline: none; text-decoration: none; display: block; clear: none; width: 100%; height: auto; max-width: 150px; margin-left: 0px; margin-right: 10px; *width:150px;">
              </div>

              <h1>Heading 1</h1>
              <p>Lorem ipsum Mollit cillum fugiat velit et Excepteur Ut qui ut ex commodo magna. Lorem ipsum Occaecat fugiat fugiat enim sint aliquip voluptate dolor Duis aliqua magna. Lorem ipsum Ex officia sit in dolor dolore laboris cupidatat quis dolor do ea do labore incididunt.</p>
           </td>
        </tr>

        <tr>
           <td>
             <div>
                <img alt="Placeholder Image" src="images/image-placeholder-150x150.gif" align="right" style="outline: none; text-decoration: none; display: block; clear: none; width: 100%; height: auto; max-width: 150px; margin-left: 0px; margin-right: 10px; *width:150px;">
             </div>

             <h1>Heading 1</h1>
             <p>Lorem ipsum Mollit cillum fugiat velit et Excepteur Ut qui ut ex commodo magna. Lorem ipsum Fugiat nulla et ad voluptate.</p>
           </td>
        </tr>
    </tbody>
</table>