将图像与HTML电子邮件中的文本相同
因此,我已经搜寻了这个网站来尝试解决我的问题,但是 没有修复它。我什至尝试将其放在上标签中,因为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 </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>
由于这是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:
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:
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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
有一些选择要尝试。
我不确定图像周围制作桌子是否可以工作,即:
最简单的是将所需的填充添加到图像本身中。
另一个选项是使用特定于Outlook特定的黑客,首先在按钮中使用,因此不确定在此上下文中是否可以使用:
您会将其放在
&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.:
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:
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.