电子邮件中的图像问题

Question

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

|一些文字 |图片 |

|图片 |一些文字 |

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

所以我的第一个问题是让 outlook 在代码中将图像显示在右侧，而图像位于文本之前。浮动和对齐不适用于此。所以我的解决办法是添加条件代码，除了 outlook（反正不支持我的响应式设计）之外的任何地方，图像都会在带有 float: right 的文本之前；在 outlook 中，代码将在文本后显示图像。

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

我修复了我发现使用一些 classes 并将 display:none 放在图像上，将 ecx 添加到 class 并使其 display: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

我用过这种方法。当我运行通过 Email on Acid 时，它显示 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>

电子邮件中的图像问题

Issues with images in email

html

css

email

outlook

gmail

|一些文字 |图片 |

|图片 |一些文字 |