Question

这是我的HTML电子邮件导航代码：

<table width="100%" cellspacing="0" cellpadding="0">
                      <tbody><tr>
                        <th width="113" align="left" style="" class="flex">
                          <table width="113" cellspacing="0" cellpadding="0" class="center">
                            <tbody><tr>
                              <td style="line-height:0; width:113px; max-width:113px; white-space: nowrap;" class="brand">
                                  <!--[if gte mso 9]>
                                    <img alt="Crisalix logo" width="113" border="0" hspace="0" vspace="0" style="display:block" src="http://my.crisalix.dev:3008/assets/notifier/crisalix-logo-outlook-6b0adbc5acd66cf0a48494f7aba7068b.png" />
                                    <div style="width:0px; height:0px; max-height:0; max-width:0; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
                                  <![endif]-->
                                    <img width="100%" vspace="0" border="0" hspace="0" src="http://my.crisalix.dev:3008/assets/notifier/crisalix-logo-cfe2b4dec925fc106eb77a1a293014c3.png" style="display:block;" alt="Crisalix logo">
                                  <!--[if gte mso 9]>
                                    </div>
                                  <![endif]-->
                              </td>
                            </tr>
                          </tbody></table>
                        </th>
                          <th align="left" style="padding:0;" class="flex">
                            <table width="100%" cellspacing="0" cellpadding="0">
                              <tbody><tr>
                                <td align="right" style="font:bold 13px/15px 'Cabin',Arial, Helvetica, sans-serif; color:#222;" class="nav">
                                  <a href="http://my.crisalix.dev:3008/gallery" style="text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:0.02em;">3D Community</a>&nbsp; &nbsp; &nbsp;
                                  <a href="http://www.crisalix.dev:3005/directory" style="text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:0.02em;">Find a surgeon</a>&nbsp; &nbsp; &nbsp;
                                  <a href="http://www.crisalix.dev:3005/en/media-appearances" style="text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:0.02em;">News</a>
                                </td>
                              </tr>
                            </tbody></table>
                          </th>
                      </tr>
                    </tbody></table>

我尝试了以下修复，将视网膜图像替换为较小的视网膜图像（如果它是视觉效果），但即使这样也不起作用，任何想法？

<!--[if gte mso 9]>
                                    <img alt="Crisalix logo" width="113" border="0" hspace="0" vspace="0" style="display:block" src="http://my.crisalix.dev:3008/assets/notifier/crisalix-logo-outlook-6b0adbc5acd66cf0a48494f7aba7068b.png" />
                                    <div style="width:0px; height:0px; max-height:0; max-width:0; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
                                  <![endif]-->
                                    <img width="100%" vspace="0" border="0" hspace="0" src="http://my.crisalix.dev:3008/assets/notifier/crisalix-logo-cfe2b4dec925fc106eb77a1a293014c3.png" style="display:block;" alt="Crisalix logo">
                                  <!--[if gte mso 9]>
                                    </div>
                                  <![endif]-->

此图像是视网膜准备好的图像：

crisalix-logo-cfe2b4dec925fc106eb77a1a293014c3.png

Answer 1

Outlook要求您在图像上放置以像素为单位的已定义数字，或者以实际完整尺寸显示图像。虽然Outlook会忽略CSS宽度/高度样式，但是你可以使用这些来覆盖大多数其他客户端定义的宽度。有一种方法可以解决这个问题。

见下文：
（因为您的开发图片对我不起作用，我借用了在crisalix网站上托管的实时徽标进行测试。）

<table width="100%" cellspacing="0" cellpadding="0">
                      <tbody><tr>
                        <th width="113" align="left" style="" class="flex">
                          <table width="113" cellspacing="0" cellpadding="0" class="center">
                            <tbody><tr>
                              <td width="113" style="line-height:0; width:113px; max-width:113px; white-space: nowrap;" class="brand">
                                    <img width="113" vspace="0" border="0" hspace="0" src="https://my.crisalix.com/assets/crisalix-logo-76fbd7c6f8f1e0c699e674797f67e220.png" style="display:block; width:100%; height:auto; max-width:113px" alt="Crisalix logo">
                              </td>
                            </tr>
                          </tbody></table>
                        </th>
                          <th align="left" style="padding:0;" class="flex">
                            <table width="100%" cellspacing="0" cellpadding="0">
                              <tbody><tr>
                                <td align="right" style="font:bold 13px/15px 'Cabin',Arial, Helvetica, sans-serif; color:#222;" class="nav">
                                  <a href="http://my.crisalix.dev:3008/gallery" style="text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:0.02em;">3D Community</a>&nbsp; &nbsp; &nbsp;
                                  <a href="http://www.crisalix.dev:3005/directory" style="text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:0.02em;">Find a surgeon</a>&nbsp; &nbsp; &nbsp;
                                  <a href="http://www.crisalix.dev:3005/en/media-appearances" style="text-decoration:none;color:#222;text-transform:uppercase;font-weight:500;letter-spacing:0.02em;">News</a>
                                </td>
                              </tr>
                            </tbody></table>
                          </th>
                      </tr>
                    </tbody></table>

视网膜准备好的图像在Outlook中显示全尺寸

1 个答案: