格式化Outlook的html电子邮件 [英] Formatting html email for Outlook

查看：123
本文介绍了格式化Outlook的html电子邮件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个html通讯在大多数电子邮件客户端，但格式化在Outlook中搞乱。 

 <！DOCTYPE html PUBLIC -  // W3C // DTD HTML 4.01 Transitional // ENhttp：// www.w3.org/TR/html4/loose.dtd\"> 
< html> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8> 
< style type =text / css> 
 body {
 background-color：＃98AFC7; 
} 
< / style> 
< title>< / title> 
< / head> 
< body> 
< table border =1px solidcellspacing =0cellpadding =10pxwidth =600style =margin-left：auto; margin-right：auto; height：auto; background-color ：#ffffff; margin-top：60px;> 
< tr> 
< td align =topstyle =padding：10px; font-family：arial; font-size：12px; ><中心>电子邮件无法正确显示？< a href =＃>< strong>在浏览器中查看< / strong>< / a>< / center>< / td& 
< / tr> 
< tr> 
< td style =border：1px solid; height：80px; text-align：center; padding：10px;>< img src =http://demo.frostmiller.com/email/ img / banner.jpgalt =Banner will go herealign =middlestyle =border：1px solid;>< / td& 
< / tr> 
< tr> 
< td> 
< table style =border：0; cellspacing：0; cellpadding：10px; height：auto;> 
< tr> 
< td valign =baselinestyle =padding：10px; width：400px; border：1px solid; halign：top;> 
< h3>热门故事< / h3> 
< ul> 
< li>主题1< / li> 
< li>主题2< / li> 
< li>主题3< / li> 
< / ul> 
< p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界的标准虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它做一个类型的标本书。它不仅存活了五个世纪，而且飞跃到电子排版，基本保持不变。在20世纪60年代，随着包含Lorem Ipsum段落的Letraset表的发布，以及最近像Aldus PageMaker的桌面出版软件（包括Lorem Ipsum的版本）的发布，它被普及。< / p> 
< / td> 
< td valign =baselinestyle =padding：10px; border：1px solid;> 
< h3>最新消息< / h3> 
< p> 
 Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界的标准虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它做一个类型的标本书。它不仅存活了五个世纪，而且飞跃到电子排版，
< / p> 
< / td> 
< / tr> 
< / table> 
< / td> 
< / tr> 
< tr> 
< td cellpadding =10pxstyle =border：1px solid; cellspacing：0; width：100％; height：auto; text-align：center;> 
< strong>版权& copy 2011 Frost Miller Group< / strong> 
< / td> 
< / tr> 
< tr> 
< td style =border：1px solid; cellspacing：0; cellpadding：10px; width：100％; height：auto> 
< center> 
< a href =＃>与我们联系< / a> 
& nbsp; 
< a href =＃>使用条款< / a> 
& nbsp; 
< a href =＃>商标< / a> 
& nbsp; 
< a href =＃>隐私权声明< / a> 
& nbsp; 
< a href =＃>网站反馈< / a> 
< / center> 
< / td> 
< / tr> 
< / table> 
< / body> 
< / html>

我需要做哪些更改才能在Outlook中正确显示？

解决方案

为了能够给予您具体帮助，您必须解释具体的部分搞乱了，或者提供屏幕截图。它还有助于了解您遇到问题的Outlook版本。



无论如何， CampaignMonitor.com的CSS指南经常帮助我调试电子邮件客户端不一致。



从该指南，您可以看到 t工作良好或在Outlook 中，这里有一些亮点的更重要的：




  • 各种类型的更复杂选择器，例如 E：first-child ， E：hover ， E& F （子组合器）， E + F （相邻兄弟组合器）， E〜F （通用兄弟组合器）。这不幸意味着诉诸解决方法，如内联样式。

  • 某些字体属性，例如 white-space 将无法使用。

  • background-image

  • Box模型属性有几个问题，最重要的是 height ， width ，并且 max - 版本不可用或有某些元素的错误。

  • 显示问题（例如 display ， float s和 position 准备使用许多难看的解决方法。



    PS。在你的具体情况下，在你的HTML有两个小问题，可能会导致你奇怪的行为。有 align = top 你可能想使用 vertical-align 。另外：单元格填充为 td s不存在。


    I have an html newsletter which works in most email clients, but the formatting is messed up in Outlook. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
  body {
    background-color: #98AFC7;
  } 
</style>
<title></title>
</head>
<body>
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;">
    <tr>
        <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td>
    </tr>
    <tr>
        <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td>
    </tr>
    <tr>
        <td>
            <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;">
                <tr>
                    <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;">
                    <h3>Top Stories</h3> 
                        <ul>
                            <li>Topic 1</li>
                            <li>Topic 2</li>
                            <li>Topic 3</li>
                        </ul>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </td>
                    <td valign="baseline" style="padding: 10px; border: 1px solid;">
                        <h3>Latest News</h3>
                        <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,  
                        </p>
                    </td>
                </tr>
            </table>                
        </td>
    </tr>
    <tr>
        <td cellpadding="10px" style="border: 1px solid; cellspacing: 0;  width: 100%; height: auto; text-align: center;">
            <strong>Copyright &copy 2011 Frost Miller Group </strong>
        </td>
    </tr>
    <tr>
        <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto">
            <center>
            <a href="#">Contact Us</a>
            &nbsp;
            <a href="#">Terms of Use</a>
            &nbsp;
            <a href="#">Trademarks</a>
            &nbsp;
            <a href="#">Privacy Statement</a>
            &nbsp;
            <a href="#">Site Feedback</a>
            </center>
        </td>
    </tr>
    </table>
</body>
</html>

    What changes do I need to make in order to get it to display correctly in Outlook?

    解决方案

    To be able to give you specific help, you's have to explain what particular parts specifically "get messed up", or perhaps offer a screenshot. It also helps to know what version of Outlook you encounter the problem in.

    Either way, CampaignMonitor.com's CSS guide has often helped me out debugging email client inconsistencies.

    From that guide you can see several things just won't work well or at all in Outlook, here are some highlights of the more important ones:

    • Various types of more sophisticated selectors, e.g. E:first-child, E:hover, E > F (Child combinator), E + F (Adjacent sibling combinator), E ~ F (General sibling combinator). This unfortunately means resorting to workarounds like inline styles.
    • Some font properties, e.g. white-space won't work.
    • The background-image property won't work.
    • There are several issues with the Box Model properties, most importantly height, width, and the max- versions are either not usable or have bugs for certain elements.
    • Positioning and Display issues (e.g. display, floats and position are all out).

    In short: combining CSS and Outlook can be a pain. Be prepared to use many ugly workarounds.

    PS. In your specific case, there are two minor issues in your html that may cause you odd behavior. There's "align=top" where you probably meant to use vertical-align. Also: cell-padding for tds doesn't exist.

    这篇关于格式化Outlook的html电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆