将图像与HTML电子邮件中的文本相同

发布于 2025-02-12 04:19:13 字数 2333 浏览 2 评论 0原文

因此,我已经搜寻了这个网站来尝试解决我的问题,但是 没有修复它。我什至尝试将其放在上标签中,因为Outlook具有奇怪的hacks,您会认为这是行不通的,但有时它们会做到。我需要一个小图像来对齐如下:

​如果您在浏览器中运行代码,则当然看起来不错。但不是Outlook:

这是我的代码。该表的类仅适用于移动设备,仅调整表的百分比:

<tr>
  <td align="center" bgcolor="#E6F1FF" style="color: #323840; padding: 10px 5px 40px 0px; margin: 0;" class="intmed">

    <table align="center" border="0" cellpadding="0" cellspacing="0" width="68%" class="support">
      <tr>
        <td valign="top" style="font-family:'Inter-Medium', 'Inter', Helvetica, Arial, sans-serif;  font-size: 14px;
                            font-weight: 500; letter-spacing: -0.22px; line-height: 20px; text-align: center;">
          <span>For any support needs, please use the in-app help feature by clicking the &nbsp;</span>
          <span style="height: 16px; display: inline-block; vertical-align:top;">        
                                <img src="https://via.placeholder.com/16" height="16" width="16" 
                                style="vertical-align: bottom;">     
                                </span>
          <span>&nbsp; in the bottom corner of your screen or reach
                               out to <a href="mailto:" target="_blank" style="color:#1e61ac;
                                    text-decoration: underline; text-underline-offset: 1.5px; font-family: 'Inter-Bold', 'Inter', Helvetica, Arial, sans-serif;" class="bld">
                                   <strong style="color:#1e61ac; font-weight: bold;">[email protected]</strong></a></span>
        </td>

      </tr>
    </table>


  </td>
</tr>

由于这是Outlook(特别是Office 365),因此有许多无法使用的标签,例如浮点,负边距,显示:flex等,我必须像1999年一样用可怕的表格进行编码。我无法更改围绕它的文本的任何样式元素,我必须使用此图像。 感谢您提供的任何帮助。

So I've scoured this website to try and fix my issue but nothing has fixed it. I even tried putting it in a superscript tag as Outlook has weird hacks that you would think wouldn't work but they do sometimes. I need a small image to align as follows in Outlook:

enter image description here

Unfortunately, Outlook isn't playing nice and aligns the image like this. If you run the code in a browser, it looks fine of course. But not Outlook:

enter image description here

Here is my code. The class for this table is for mobile only and merely adjusts the percentage of the table:

<tr>
  <td align="center" bgcolor="#E6F1FF" style="color: #323840; padding: 10px 5px 40px 0px; margin: 0;" class="intmed">

    <table align="center" border="0" cellpadding="0" cellspacing="0" width="68%" class="support">
      <tr>
        <td valign="top" style="font-family:'Inter-Medium', 'Inter', Helvetica, Arial, sans-serif;  font-size: 14px;
                            font-weight: 500; letter-spacing: -0.22px; line-height: 20px; text-align: center;">
          <span>For any support needs, please use the in-app help feature by clicking the  </span>
          <span style="height: 16px; display: inline-block; vertical-align:top;">        
                                <img src="https://via.placeholder.com/16" height="16" width="16" 
                                style="vertical-align: bottom;">     
                                </span>
          <span>  in the bottom corner of your screen or reach
                               out to <a href="mailto:" target="_blank" style="color:#1e61ac;
                                    text-decoration: underline; text-underline-offset: 1.5px; font-family: 'Inter-Bold', 'Inter', Helvetica, Arial, sans-serif;" class="bld">
                                   <strong style="color:#1e61ac; font-weight: bold;">[email protected]</strong></a></span>
        </td>

      </tr>
    </table>


  </td>
</tr>

Since this is Outlook (Office 365 specifically), there are many tags that cannot be used such as float, negative margins, display: flex, etc and I have to code like it's 1999 with horrible tables. I cannot change any style element of the text surrounding it and I have to use this image.
Thank you for any help you can provide.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

标点 2025-02-19 04:19:13

有一些选择要尝试。

我不确定图像周围制作桌子是否可以工作,即:

<table cellspacing=0 cellpadding=0 border=0 role=presentation><tr><td style="margin-top:5px"><img ...></td></tr></table>

最简单的是将所需的填充添加到图像本身中。

另一个选项是使用特定于Outlook特定的黑客,首先在按钮中使用,因此不确定在此上下文中是否可以使用:

<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden> </i><![endif]-->

您会将其放在&lt; img ... img ...&gt; tag之前。

它与线路高(也许是字体大小)有关,因此您也可以在图像周围的范围内进行播放。

There are a few options to try.

I'm not sure if making a table around the image would work, i.e.:

<table cellspacing=0 cellpadding=0 border=0 role=presentation><tr><td style="margin-top:5px"><img ...></td></tr></table>

Perhaps easiest would be to add the required padding to the image itself.

Another option is to use an Outlook-specific hack, first used in a button, so not sure if that would work in this context:

<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden> </i><![endif]-->

You would put that before the <img ...> tag.

It has to do with line-height (and perhaps font-size), so you can also play around with that, e.g. in the span around the image.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文