Outlook html 和 css，不会在邮件中显示正确的结果，但会在浏览器中显示答案

【问题标题】：Outlook html and css, won't show correct result in mail, but will in browserOutlook html 和 css，不会在邮件中显示正确的结果，但会在浏览器中显示
【发布时间】：2017-07-19 06:25:44
【问题描述】：

我正在使用HTML 和CSS 进行时事通讯设置。

我正在使用 Outlook 2010。

问题是，我已经在 Notepad++ 中制作了这个，并在 firefox 中查看了它以进行调试。当一切看起来都正常并在 FF 中运行时，我从时事通讯系统中对其进行了测试。

我上传了HTML、CSS 和图片，一切正常。

此外，我对CSS 中的某些特定类有疑问。

我有一个名为.text10 的类来制作文本size 10（为了测试，我将颜色设为红色以查看视觉差异）。问题是，我用类 .text10 设置的 TD 没有得到 size 10，而是从 body tag 获取默认的 size 14，并且没有变红。

我的时事通讯header 因我制作的另一个课程而变红了。

当我打开邮件然后打开源代码时，我可以看到HTML 确实得到了.text10 类，但它是空的，没有任何价值？

我做错了什么，或者我在HTML 或CSS 中监督了什么？这是JSFIDDLE。

【问题讨论】：

电子邮件和 css 不能很好地混合。我的建议是在任何地方都使用内联样式。这是一个不错的compatibility chart。或者通过 mailchimp 或 campaignmonitor 等服务注册免费试用，并使用他们的编辑器创建电子邮件并查看生成的源代码。

标签： css outlook html-table html-email

【解决方案1】：

对于电子邮件模板，我建议您将所有内容设置为内联样式，并且手机上需要不同的内容必须在标题@media 中，并带有!important。如示例所示。

您也可以通过Litmus 运行测试

希望对你有帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style>
 @media only screen and (max-width: 480px) {

    .paragraphText p {
        font-size: 24px !important;
    }
}
</style>
</head>

<body>                            
    <div class="paragraphText">    
        <p style="color: #000000; font-family: Arial, sans-serif; font-size: 14px;">Some Text</p>
    </div>                                       
</body>
</html>

【讨论】：

除了这个 TD 之外，css 工作正常。其他一切都得到正确的尺寸和颜色。但是这个类只是空的。

【解决方案2】：

Outlook 使用 Word 呈现 HTML 标记。您可以在 MSDN 的以下系列文章中找到支持和不支持的 HTML 元素、属性和级联样式表属性：

【讨论】：

感谢您的意见，虽然我已经看过它们，而且我没有使用任何不允许的 css

【解决方案3】：

原来每个元素只能使用一个类。

例子：只会使用link这个类，而忽略color

<a href="www.site.com" class="link color">link</a>

示例：会正常工作

<a href="www.site.com" class="color">link</a>

【讨论】：