html - 电子邮件中的图像问题

Question

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

---

|一些文字 |图片 |

|图片 |一些文字 |

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

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

我用过这种方法。当我通过 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>