Question

我知道以前曾问过这种类型的问题，但是给出的解决方案并没有给我解决方案。

我希望<td>的宽度为70％，但是插入的图像正在推动Outlook中接收到的电子邮件的宽度（我使用MS Outlook Pro 2013）。我不想使用单位px，因为它不能覆盖所有屏幕宽度。一个解决方案可能是使用<div>而不是<td>，但是有人告诉我，并非到处都正确支持<div>。请告知。

HTML

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #fee7f3; color: #ffffff; border-radius: 3px 3px 0 0;">
    <tbody>
        <tr>
            <td style="width: 70%;"><img src="/example.jpg" style="width: auto; height: auto; float: left; box-sizing: border-box;"></td>
            <td style="width: 30%;"><h1>Example txt</h1></td>
        </tr>
    </tbody>
</table>

我的尝试

我用<img>标签包裹了<p>
我为display: inline-block添加了<td>
我为width和height添加了属性<td>和<img>
我为width: 100%添加了height: auto和<img>

Answer 1

好消息是Outlook不支持@media查询，因此您可以覆盖需要在电子邮件中使用的所有设置值。

Outlook倾向于忽略内联样式的图像宽度。假设您要使用600像素宽的电子邮件，而您的图片是400像素，则将宽度编码如下：

<img src="example.jpg" width="400" style="width: 70%; height: auto;" />

您应该注意的其他事项是，在大多数电子邮件客户端中，框大小设置不起作用。 border-radius不适用于Outlook。

祝你好运。

HTML Outlook按图像忽略td宽度

1 个答案: