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

Question

我正在使用 HTML 和 CSS 设置简报。

我使用的是 Outlook 2010。

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

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

此外，我对 CSS.

中的某些特定 class 有疑问

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

我的时事通讯 header 比我制作的另一个 class 变红了。

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

我哪里做错了，或者我在我的 HTML 或 CSS 中监督了什么？这是 JSFIDDLE.

Answer 1

如果是电子邮件模板，我建议您将所有内容都设为内联样式，phone 上需要不同的内容必须在 header @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>

Answer 2

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

Answer 3

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

示例：将仅使用 class link，而忽略 color

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

示例：将正常工作

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

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

Outlook html and css, won't show correct result in mail, but will in browser

css

outlook

html-table

html-email