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

I'm making a newsletter setup with HTML and CSS.

我正在使用HTML和CSS制作新闻稿。

I'm using Outlook 2010.

我正在使用Outlook 2010。

The thing is, I've make this in Notepad++ and viewed it in firefox for debug. When everything seems ok and worked in FF, I tested it from the newsletter system.

问题是,我在Notepad ++中做了这个,并在firefox中查看它以进行调试。当一切看起来都很好并且在FF工作时,我从时事通讯系统中测试了它。

I uploaded the HTML, CSS and pictures and everything works as it should.

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

Besides that I have a problem with some specific classes in the CSS.

除此之外,我在CSS中遇到了一些特定类的问题。

I have a class called .text10 to make the text size 10(for testing i make the color red to see the visual difference). The thing is, that the TD I've set with the class .text10 is not getting size 10, but get the default size 14 from the body tag, and is not getting red.

我有一个名为.text10的类来使文本大小为10(为了测试我使颜色变为红色以查看视觉差异)。事实是,我用类.text10设置的TD不是大小为10,而是从body标签获得默认大小14,并且没有变红。

My newsletter's header is getting red from another class I've made.

我的通讯的标题是从我制作的另一个班级变红了。

When I open the mail and then open the source I can see that the HTML indeed got the class .text10, but its empty with no value?

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

What am I doing wrong, or is there something I've overseen in my HTML or CSS? Here's a JSFIDDLE.

我做错了什么,或者我在HTML或CSS中监督过什么?这是一个JSFIDDLE。

3 个解决方案

#1

When it is to an email template, I would advise you to make everything inline style and the things that need to be different on the phone must be in header @media, with a !important on. as shown in the example.

当它是一个电子邮件模板时,我会建议你制作所有内联样式,并且手机上需要不同的东西必须在标题@media中,并且有一个!important。如示例中所示。

You can also run your test through Litmus

您也可以通过Litmus进行测试

Hope it helps

希望能帮助到你

<!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>

#2

Outlook uses Word for rendering HTML markup. You can find the supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following series of articles in MSDN:

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

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

Outlook 2007中的Word 2007 HTML和CSS呈现功能(第1部分,共2部分)

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Outlook 2007中的Word 2007 HTML和CSS呈现功能(第2部分,共2部分)

#3

Turned out you can only use one class for each element.

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

Example: Will only use the class link, and overlook color

示例:仅使用类链接,并忽略颜色

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

Example: Will work normal

示例:将正常工作

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

#1