如何在 Gmail 中呈现 CSS 边框？答案

【问题标题】：How do I render CSS Borders in Gmail?如何在 Gmail 中呈现 CSS 边框？
【发布时间】：2020-12-11 20:14:12
【问题描述】：

我正在尝试通过 G Suite 帐户发送 HTML 电子邮件。当我在网络浏览器中打开我的 HTML 时，它会完美呈现：

但是，当在电子邮件中发送 HTML 时，边框不会呈现：

我尝试使用内联样式，并尝试将正文中的所有内容包装在单独的 div 中。没有任何效果。这是我正在使用的 HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>[spelab] EoD.md</title>
    <style>
        /* CSS in concern */
            body {
               border: 2px solid red;
               border-radius: 5px;
            }
    </style>
</head>
<body id="preview">
    <h4 class="code-line" data-line-end="1" data-line-start="0"><a id="Things_I_Did_Today_0"></a>Things I Did Today</h4>
    <hr>
    <ul>
        <li class="has-line-data" data-line-end="3" data-line-start="2"><strong>Mail/messages.</strong></li>
        <li class="has-line-data" data-line-end="3" data-line-start="2"><strong>Finished testing product 1234.</strong></li>
        <li class="has-line-data" data-line-end="3" data-line-start="2"><strong>Finished report on product 5678.</strong></li>
    </ul>
    <hr>
    <p class="has-line-data" data-line-end="11" data-line-start="4">John Doe<br> Senior example position<br> Example Company<br> 1234 Main Street Washington, NY 12345<br>
        <a href="">email@example.com</a><br>
        <a href="">Website@example.com</a><br>
        <a href="tel:+1-123-455-7891">+1 (123) 456-7891</a>
    </p>
</body>
</html>

为什么 Gmail 不呈现边框？有解决方法吗？可能与我transferring the HTML to my email的方式有关吗？

【问题讨论】：

border 受支持。尝试检查生成的 HTML/CSS 代码，也许尝试使用 inlien 样式...developers.google.com/gmail/design/reference/supported_css
@pavel 我实际上已经尝试过使用内联样式。我会在我的问题中澄清这一点
尝试将整个 body 包裹在一个 div 中，并为该 div 添加一个边框。
@SinestroWhite 似乎不起作用。此外，即使我在记事本中编辑 HTML，谷歌浏览器也会不断强制 div 成为body 的子元素。
我的意思是在 body 中的 div 周围的其他方式，很抱歉误导了你。

标签： html css gmail rendering html-email

【解决方案1】：

大多数网络邮件不支持以body 元素为目标的样式选择器。没错！在像 Gmail 的桌面网络邮件这样的网络邮件中，您的 HTML 实际上包含在网络邮件自己的 HTML 中。如果他们让您设置body 的样式，这意味着您实际上可以更改 Gmail 自己的界面！所以你不能在 Gmail 中这样做。

但是，Gmail 的桌面网络邮件中发生的一些特殊情况是，您的 HTML 电子邮件中的 <body> 元素变成了 <div>，并应用了您的一些属性。因此，如果您在示例 (<body id="preview" style="border: 2px solid red; border-radius: 5px;">) 中将样式内联到 <body>，Gmail 会将其变为：

<div id="m_1234123412344123434preview" style="border: 2px solid red; border-radius: 5px;">

所以这可能适用于您的情况，但这绝对不适用于其他不具有相同行为的网络邮件（例如雅虎的桌面网络邮件）。所以我的建议是，作为suggested by another user in the comments，在您的电子邮件的body 内添加一个包装<div>。像下面这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>[spelab] EoD.md</title>
</head>
<body id="preview">
    <div style="border: 2px solid red; border-radius: 5px;">
        <h4 class="code-line" data-line-end="1" data-line-start="0"><a id="Things_I_Did_Today_0"></a>Things I Did Today</h4>
        <hr>
        <ul>
            <li class="has-line-data" data-line-end="3" data-line-start="2"><strong>Mail/messages.</strong></li>
            <li class="has-line-data" data-line-end="3" data-line-start="2"><strong>Finished testing product 1234.</strong></li>
            <li class="has-line-data" data-line-end="3" data-line-start="2"><strong>Finished report on product 5678.</strong></li>
        </ul>
        <hr>
        <p class="has-line-data" data-line-end="11" data-line-start="4">John Doe<br> Senior example position<br> Example Company<br> 1234 Main Street Washington, NY 12345<br>
            <a href="">email@example.com</a><br>
            <a href="">Website@example.com</a><br>
            <a href="tel:+1-123-455-7891">+1 (123) 456-7891</a>
        </p>
    </div>
</body>
</html>

【讨论】：

这个答案似乎非常有见地，我真的希望它能奏效。不幸的是，事实并非如此。另外，如果您阅读了有关我的问题的 cmets，您会发现我已经尝试过了。
很抱歉这对您不起作用。这是我上面发布的代码中的a test on Email on Acid。我猜你的问题来自 HTML 以外的其他东西。您能否详细说明您是如何发送电子邮件的？
看我问题的结尾。我在那里解释了我是如何发送电子邮件的。
虽然这绝对不是发送 HTML 电子邮件的推荐方法（因为您的所有代码都将被您发送的电子邮件客户端过滤），但我只是尝试将上面的代码复制并粘贴到一个新的 Gmail 撰写窗口，它可以正常工作。
我明白了...所以这是 webemail 问题...这就是为什么大多数电子邮件模板都使用图像作为技巧...