Html 如何在Gmail中呈现CSS边框？
我正试图通过G套件帐户发送一封HTML电子邮件。当我在web浏览器中打开HTML时，它会完美地呈现： 但是，在电子邮件中发送HTML时，边框不会呈现： 我尝试使用内联样式，并尝试将正文中的所有内容包装在单独的Html 如何在Gmail中呈现CSS边框？,html,css,gmail,rendering,html-email,Html,Css,Gmail,Rendering,Html Email,我正试图通过G套件帐户发送一封HTML电子邮件。当我在web浏览器中打开HTML时，它会完美地呈现： 但是，在电子邮件中发送HTML时，边框不会呈现： 我尝试使用内联样式，并尝试将正文中的所有内容包装在单独的div中。什么都没用。这是我正在使用的HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>[spelab] Eo
div<!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>
[spelab]EoD.md
/*关注CSS*/
身体{
边框：2倍纯红；
边界半径：5px；
}
为什么Gmail没有呈现边界？有解决办法吗？这可能与我的方式有关吗？大多数网络邮件不支持针对
正文元素的样式选择器。这是正确的！在像Gmail的桌面webmail这样的webmail中，您的HTML实际上包含在webmail自己的HTML中。如果他们允许你设计正文
，那就意味着你实际上可以改变Gmail自己的界面！所以你不能在Gmail中这么做
然而，Gmail桌面webmail中发生的一件特别的事情是，HTML电子邮件中的
元素变成了
，并应用了一些属性。因此，如果您将样式内联到示例中的
（
），Gmail会将其转换为：
因此，这在您的情况下可能会起作用，但在其他没有相同行为的网络邮件（例如雅虎的桌面网络邮件）中肯定不会起作用。因此，我的建议是，在电子邮件的正文
中添加一个包装。例如：
[spelab]EoD.md
大多数Web邮件不支持针对正文
元素的样式选择器。这是正确的！在像Gmail的桌面webmail这样的webmail中，您的HTML实际上包含在webmail自己的HTML中。如果他们允许你设计正文
，那就意味着你实际上可以改变Gmail自己的界面！所以你不能在Gmail中这么做
然而，Gmail桌面webmail中发生的一件特别的事情是，HTML电子邮件中的
元素变成了
，并应用了一些属性。因此，如果您将样式内联到示例中的
（
），Gmail会将其转换为：
因此，这在您的情况下可能会起作用，但在其他没有相同行为的网络邮件（例如雅虎的桌面网络邮件）中肯定不会起作用。因此，我的建议是，在电子邮件的正文
中添加一个包装。例如：
[spelab]EoD.md
支持
边框
。尝试检查生成的HTML/CSS代码，可能尝试使用inlien样式@pavel我实际上已经尝试过使用内联样式。我要澄清的是，在我的问题中，尝试将整个身体包裹在一个div中，并在div中添加一个边框。@SinestroWhite似乎不起作用。此外，Google Chrome不断强制div成为正文
的子项，即使我在记事本中编辑HTML也是如此。我的意思是在正文中的div周围使用另一种方式，很抱歉误导您。边框
受支持。尝试检查生成的HTML/CSS代码，可能尝试使用inlien样式@pavel我实际上已经尝试过使用内联样式。我要澄清的是，在我的问题中，尝试将整个身体包裹在一个div中，并在div中添加一个边框。@SinestroWhite似乎不起作用。此外，谷歌Chrome不断强迫div成为body
的孩子，甚至当我在记事本中编辑HTML时也是如此。我的意思是以另一种方式绕过body中的div，很抱歉误导了你。这个答案似乎很灵通，我真的希望它能起作用。不幸的是，事实并非如此。另外，如果你读了我问题的评论，你会发现我已经试过了。很抱歉，这对你不起作用。这是我在上面发布的代码。我猜你的问题不是来自HTML。你能详细说明你到底是如何发送电子邮件的吗？请看我问题的结尾。我在那里解释了我是如何发送电子邮件的。虽然这绝对不是一种推荐的发送HTML电子邮件的方法（因为您发送的电子邮件客户端会过滤您的所有代码），但我只是尝试将我的上述代码复制并粘贴到一个新的Gmail compose窗口中，并且它可以正常工作。这个答案似乎很灵通，我真的希望它能起作用。不幸的是，事实并非如此。另外，如果你读了我问题的评论，你会发现我已经试过了。很抱歉，这对你不起作用。这是我在上面发布的代码。我猜你的问题不是来自HTML。你能详细说明你到底是如何发送电子邮件的吗？请看我问题的结尾。我在那里解释了我是如何发送电子邮件的。虽然这绝对不是一种推荐的发送HTML电子邮件的方法（因为您发送的电子邮件客户端将过滤您的所有代码），但我只是尝试在新的Gmail compose窗口中复制并粘贴我的上述代码，它就可以正常工作。