带有css的html代码在outlook中不起作用

Question

我正在为我们公司构建一个 HTML 签名。之前我用的是切片照片​​，但是因为想把文字和图片结合起来，所以想做完全HTML（表格、链接、文字、图片等）

在edit plus上看起来很棒，当我打开成品的chrome文件时看起来很棒，但实际上将它放入outlook是一个问题。在 Outlook 中，所有内容都被压缩为一列，而不是我的表格布局。

我尝试直接复制并粘贴到 Outlook 框中，我尝试创建新签名并使用我的代码编辑文档。

<style>
    Details {
        font-size: 13px;
        font-family: "Arial";
        color: #39262d;
    }
    Person {
        font-size: 17px;
        font-family: "Arial";
        color: #749b53;
        font-weight: bold;
    }
    Job {
        font-size: 16px;
        font-family: "Arial";
        color: #39262d;
        font-weight: bold;  
    }
    deta {
        font-size: 13px;
        font-family: "Arial";
        color: #39262d;
    }
</style>


<table style="width: 379px;">
    <tbody>
        <tr>
            <td style="width: 116px;">
                <a href="https://www.grapaes.com" target="_blank"> <img style="width: 100px; height: auto; border: 0;" src="https://grapaes.com/signatures/Grapa_Logo%20TM10pt%20-%20CLEAR.png? 
                    _t=1561901957" alt="Logo" width="121" border="0" /></a>
            </td>
            <td style="width: 262px;">
                <p>
                    <Person>
                        <br />Person
                    </Person>
                    <br />
                    <Job>Job</Job>
                    <br />
                    <br />
                    <deta>CompanyName
                        <br />Phone:
                        <br />Mobile:
                    </deta>
                </p>
            </td>
        </tr>
    </tbody>
</table>
<table style="width: 379px;">
    <tbody>
        <tr>
            <img style="width: 750px; height: 5px; border: 0;" src="https://grapaes.com/signatures/Grapa%20line%20green%209%20pt.png? 
                _t=1562055131" alt="Line" width="121" border="0" />
            <td style="width: 3479px;">&nbsp;</td>
        </tr>
    </tbody>
</table>

图片和文字没有正确对齐.d

Answer 1

@brooksreylt 的回答是一个很好的起点，但仍有一些您不需要的东西，例如绿线旁边的额外单元格。你也有不匹配的宽度，应该真正解决。

1. 最底部的绿线宽度为 750 像素，但 HTML 属性宽度也为 121。选择一个并使两者相同。最重要的是，包裹这个元素的表格被设置为 379px 以匹配上面的表格。这也与图像宽度冲突。
2. 您需要将图像放在表格单元格内，然后无需在该单元格上设置宽度。

以下是我要做的改动：

<table style="width: 379px;">
    <tbody>
        <tr>
            <td style="width: 116px;"><a href="https://www.grapaes.com" 
        target="_blank"> <img style="width: 100px; height: auto; border: 0;" 
        src="https://grapaes.com/signatures/Grapa_Logo%20TM10pt%20-%20CLEAR.png? 
        _t=1561901957" alt="Logo" width="121" border="0" /></a></td>
            <td style="width: 262px;">
                <span style="font-size: 17px; font-family: 'Arial'; color: #749b53; font-weight: bold;">Person</span><br />
                <span style="font-size: 16px; font-family: 'Arial'; color: #39262d; font-weight: bold;">Job</span><br /><br /> 
                <span style="font-size: 13px; font-family: 'Arial'; color: #39262d;">CompanyName<br />Phone:<br />Mobile:</span>
            </td>
        </tr>
    </tbody>
</table>
                                    
<table style="width: 100%;">
    <tbody>
        <tr>
            <td><img style="width: 600px; border: 0;" 
            src="https://grapaes.com/signatures/Grapa%20line%20green%209%20pt.png? 
            _t=1562055131" alt="Line" width="600" border="0" /></td>
        </tr>
    </tbody>
</table>

Answer 2

@Roy 是对的，在为 Outlook 或任何其他客户端（Gmail、Yahoo 等）编写电子邮件时，所有样式都必须是内联样式。在开发过程中，您的浏览器会读取样式标签。但是，电子邮件客户端通常会删除这些样式，并且您的电子邮件将没有样式。内联样式是解决此问题的一种方法。

以下是使用内联样式重新编写的代码。我还将您的自定义标签更改为跨度标签，因此它们是标准的 HTML 元素。我删除了 Person、Job 等标签。我什至删除了段落标签。我这样做是因为边距和填充值将因浏览器和电子邮件客户端的不同而不同。这将为您提供为所有平台/电子邮件客户端提供标准布局的最佳机会。

<table style="width: 379px;">
    <tbody>
        <tr>
            <td style="width: 116px;">
                <a href="https://www.grapaes.com" target="_blank"> 
                    <img style="width: 100px; height: auto; border: 0;" src="https://grapaes.com/signatures/Grapa_Logo%20TM10pt%20-%20CLEAR.png? _t=1561901957" alt="Logo" width="121" border="0" />
                </a>
            </td>
            <td style="width: 262px;">
                <span style="font-size: 17px; font-family: 'Arial'; color: #749b53; font-weight: bold;">Person</span><br />
                <span style="font-size: 16px; font-family: 'Arial'; color: #39262d; font-weight: bold;">Job</span><br /><br /> 
                <span style="font-size: 13px; font-family: 'Arial'; color: #39262d;">CompanyName<br />Phone:<br />Mobile:</span>
            </td>
        </tr>
    </tbody>
</table>
<table style="width: 379px;">
    <tbody>
        <tr>
            <td>
                <img style="width: 750px; height: 5px; border: 0;" src="https://grapaes.com/signatures/Grapa%20line%20green%209%20pt.png?_t=1562055131" alt="Line" width="121" border="0" />
            </td>
            <td style="width: 3479px;">&nbsp;</td>
        </tr>
    </tbody>
</table>