【问题标题】:HTML Emails Rendering Text Centered in IE以 IE 为中心呈现文本的 HTML 电子邮件
【发布时间】:2011-10-29 08:18:05
【问题描述】:

我正在从 Outlook 向我的 mail.live.com 帐户发送 HTML 电子邮件。当我使用 Firefox 查看 mail.live.com 中的结果时,电子邮件看起来不错,但是当我使用 IE 时,所有内容都居中。

我添加了很多 align=left 和内联 CSS style='text-align:left' 来控制它,但没有任何区别。

当我将 HTML 文件直接加载到 IE 中时,没问题;仅当从我的 Live/Hotmail 帐户查看时,它才会出现偏差。

有人遇到过这个问题吗?

 <html> 
 <body style='background:#333;font-family:arial;text-align:left;'>

        <style>

            #BlueStripe {

                color:#000000;
                background:#113399;
                width:800px;
                height:35px;

            }


            #Content {
                width:800px;

            }
            #LeftContentPanel {
                border:none;

                padding:20px;
                padding-top:5px;
            }

            #LeftContentPanel h1, h2, h3 {
                color:#113399;
                font-family:Arial,Verdana;
                font-weight:normal;
                margin-bottom:5px;

            }   
            #LeftContentPanel p {
                margin-top:5px;
            }   

            h1, h2 {
                font-weight:normal;
                font-size:22px;
                padding-bottom:0px;

            }
            #RightContentPanel {

                width:220px;
                padding:10px;

                margin-top:10px;
                margin-right:30px;

                color:#fff;

                font-weight:normal;

            }
            #RightContentPanel h1, h2 {
                font-weight:normal;
                font-size:20px;
                margin-top:5px;
                margin-bottom:-5px;

            }

            #RightContentPanel p {
                font-weight:normal;
                font-size:14px;

            }



            .edition {
                text-align:left;
                font-family:Arial,Verdana;
                font-weight:normal;
                font-size:16px;
                color:#113399;
                margin-left:10px;
                margin-top:15px;

            }

            #FooterText {
                color:#113399;
                font-size:12px;
            }

            p {
                text-align:left;

            }


    </style>


        <table border='0' Id='PageWidth' Style='border:0px;width:800px;background:#fff;text-align:left;' cellpadding=0 cellspacing=0 align='center'>
            <tr>
                <td>
                    <table border='0'  Style='border:0px;width:800px;' cellpadding=0 cellspacing=0 align='left'>

                        <tr Id='BlueStripe' Width='800'>
                            <td ColSpan='3'></td>
                        </tr>


                        <!-- Header -->
                        <tr id='LogoTitle' align='Left'>
                            <!--  Col 1/2 -->   <td align='left'>
                                                    <img src='logo.jpg' alt='club logo' />
                                                </td> <!-- Col 1 -->
                            <!--  Col 2/2 -->   <td class='Panel2' ColSpan='2'>
                                                    <br />
                                                    <img src='title.jpg' alt='club news' />
                                                    <br />
                                                    <br />
                                                    <p class='edition' align='left'>Edition 9 – September 2011</p></td> <!-- Col 2 -->
                        </tr>
                        <!-- Banner Image - Dumb Bells -->
                        <tr Id='BannerImage'  Style='width:800px;'>
                            <!--  Col 1/1 --> 
                            <td ColSpan='3' Width='800px' Style='width:800px;text-align:left;' CellSpacing='0' CellPadding='0'  align='Left'>
                                <img src='banner.jpg' alt='Dumb Bells' Width='800px' />


                            </td> <!-- Col 1 -->
                        </tr>
                        <tr Id='Content' align='Left'>
                            <!--  Col 1/1 --> 
                            <td ColSpan='3'>
                                <br />
                                <table id='ContentPanel' Style='margin-top:10px'>
                                    <tr  align='Left'>
                                        <td align='Left'>
                                            <table id='' Style='border:0;text-align:left' align='left'>
                                                <tr>
                                                    <td Id='LeftContentPanel' Width='460'>
                                                        <h1>Insert heading here</h1>
                                                        <p>
                                                            Vellant enes mo volupition eati amenima ximpor andis es mil mi,
                                                            optate cum in niatqui dellabo. Turiti quos debis demolen dustis
                                                            que peditat iorione quidignimin non con eaquatia nullore perit,
                                                            totat incimol orrum, coriassequo quia aut eos unt quia dolent
                                                            estemquodio odionseque esed que dolupta sperror sit quia que
                                                            pa dipsape llore, nitiis audi de nonse nisqui quia velit estem rem
                                                            quam rerum autem voluptiae atur?
                                                        </p>
                                                        <h1>Insert heading here</h1>
                                                        <p>
                                                            Feremos quisinte siment. Cium volorpo ressit re, omnisci as
                                                            autent as moluptas nonsece atquaessit eum dolut aut quis
                                                            nobisto quat aborem quis antempore, id moluptatur, sa que et
                                                            ea ium apis delignisi te si aut poribus ullaudae od quia conem
                                                            se verepud itatemporum ulparum re, volut velis eatis es accum
                                                            aut ratur, vende ius si doloriorum ent qui que velesciat que nam,
                                                            alitem ati a non remperorest restrum volentintem voluptatur am
                                                            rem eumqui quat et ea quiame quat.
                                                        </p>
                                                        <p>
                                                            Occatem poreium in rehentio eat el earia iur am, et laborio.
                                                            Itatur? Quiae estiorecese conseque niet estem as etusciur mos
                                                            ipsapid que videbit audit quid ut volupta sperias sequate ctotat
                                                            et et voluptis dellest, simus, secus aute quis iliquis si quia simus.
                                                        </p>

                                                        <div id='FooterText'>
                                                            more text here
                                                        </div>

                                                    </td>
                                                </tr>
                                            </table>

                                        </td>
                                        <td Width=5></td>
                                        <td valign='top' align='left' style='padding:15px;text-align:left'>
                                            <table  Id='RightContentPanel' Style='text-align:left;' >
                                                <tr style='padding:15px;text-align:left'>






                                                    <td style='margin-top:0px;padding:5px;padding:15px;text-align:left;padding-top:5px;   background-color:#113399;'>
                                                            <h1>Insert header here</h1>
                                                            <p align='left' style='text-align:left'>
                                                                Vellant enes mo volupition eati
                                                                amenima ximpor andis es mil
                                                                mi, optate cum in niatqui de
                                                                llabo. Turiti quos debis demo
                                                                len dustis que peditat iorione
                                                                quidignimin non con eaquatia
                                                                nullore perit, totat incimol or
                                                                rum, coriassequo quia aut eos
                                                                unt quia dolent estemquodio.
                                                            </p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td height='35'>
                                                    </td>
                                                </tr>
                                                <tr>

                                                    <td Style='margin-top:30px;padding-top:5px;padding:5px;padding:15px;text-align:left;background-color:#ff3333;'>
                                                            <h1>Insert header here</h1>
                                                            <p>
                                                                Vellant enes mo volupition eati
                                                                amenima ximpor andis es mil
                                                                mi, optate cum in niatqui de
                                                                llabo. Turiti quos debis demo
                                                                len dustis que peditat iorione
                                                                quidignimin non con eaquatia
                                                                nullore perit, totat incimol or
                                                                rum, coriassequo quia aut eos
                                                                unt quia dolent estemquodio.
                                                            </p>                                        

                                                    </td>
                                                </tr>
                                            </table>

                                        </td>
                                    </tr>
                                </table>


                            </td> <!-- End Col 1 -->

                        </tr>       
                        <tr>
                            <td Id='BlueStripe' ColSpan='3'></td>
                        </tr>               
                    </table>
                </td>
            </tr>               
        </table>
</body>


来自其他用户的附加信息:

到目前为止,似乎没有任何答案有帮助。我将顶层堆叠表格居中,所有嵌套表格在所有可能的元素上都与 text-align:left; 左对齐,但它没有改变任何东西。

然后我在整个代码中删除了所有居中文本和表格的实例,它仍然在 IE 9 中的所有网络电子邮件客户端中呈现居中文本。有趣的是,如果我在 IE 9 中从 Gmail 或 Yahoo 发送电子邮件,它会正确呈现(无需添加所有额外的对齐/文本左对齐)。但是,此电子邮件必须来自 Outlook,因此在这种情况下这不是可行的解决方法。

【问题讨论】:

  • body标签中的align="left"会不会有效果?
  • 你用什么机制来发送它?它是 HTML 文件附件吗?还是其他方式?
  • 您说您从 Outlook 发送的电子邮件正在从您的 mail.live.com 进行测试。您是否尝试将其发送到另一个免费邮件服务器(例如 mail.google.com)并查看电子邮件在 IE 中是如何呈现的。可能问题出在容器 HTML 元素中?

标签: html rendering hotmail


【解决方案1】:

尝试放入一个 head 标签并结束你的 HTML 标签。还将您的样式放在标题标签中。我这样做并在 IE Hotmail 中尝试过,它对我有用。

【讨论】:

    【解决方案2】:

    您的 html 中可能存在冲突的 id/class,尽管这应该会在所有浏览器中产生相同的效果。

    不可能告诉您浏览器中发生了什么。尝试使用浏览器调试工具检查元素,这应该会告诉您应用了哪些样式,并且它们应该显示 text-align 的来源。

    在 Internet Explorer 中,调试工具的快捷方式是 F12,使用该窗口左上角的箭头可以专注于某些元素。

    【讨论】:

    • 是的,你说得对,它似乎在其他浏览器中也可以工作,只是 IE 搞砸了。
    【解决方案3】:

    HTML 电子邮件是一场噩梦,我已经构建了很多很多很多。在 IE 中渲染时,你检查过代码吗?

    我发现 Live/Hotmail 的呈现方式甚至取决于 IE 的版本——更不用说其他浏览器了。

    另外,这可能听起来很侮辱 - 但您是否验证了代码?

    干杯

    【讨论】:

      【解决方案4】:

      这听起来很烦人,请尝试在段落标签上添加内联 text-align: left;

      为了将来参考,HTML Email Boilerplate 是那些可怕的 HTML 电子邮件项目的一个很好的基础。

      【讨论】:

      • 在进行每次增量更改时,我一直在慢慢添加内联,感谢链接参考。
      【解决方案5】:

      我知道这个问题很老,但为了将来参考,我注意到包含正文没有指定 align="left"。即使它嵌套在 DO align=:left" 的其他 TD 中,sucky IE 也不会继承该设置。

       <!--  Col 1/1 --> 
      
                    <table id='' Style='border:0;text-align:left' align='left'>
                    <tr>
                     <td Id='LeftContentPanel' Width='460' [ALIGN="LEFT" NEEDED HERE]>
                     <h1>Insert heading here</h1>
      

      【讨论】:

      • 但它确实尊重 css 样式 text-align:left,它应该以它在代码 sn-p 中使用的方式工作。
      • 应该,但即使在左对齐表格中,我也将 IE 默认设置为居中文本。上面的 TD 标签没有明确指定 style="text-align:left" 或 "align=left" 除非我遗漏了什么。
      【解决方案6】:

      电子邮件客户端中的 CSS 支持很糟糕。不幸的是,通过 Outlook 发送可能会使情况变得更糟。您可能希望考虑使用邮件黑猩猩之类的服务,但我猜您可能已经想到了这一点,并且通过 Outlook 发送是该项目的要求,所以这里有一些可能的选择(我感到你的痛苦,我必须解决类似的问题)。

      作为一般经验法则,将您的网页编码为 1999 年,我发现广告系列监控资源非常宝贵。

      以下是关于一般良好做法的便捷指南:http://www.campaignmonitor.com/design-guidelines/

      完整的 css 支持分解:http://www.campaignmonitor.com/design-guidelines/

      论坛非常方便:http://www.campaignmonitor.com/forums/

      别担心,我不为活动监视器工作!只是我发现有用的东西。

      您可以尝试以下几点:

      也许将您的文本包装在 div 中并放入内联 text-align:left。或者可能在 p 标签上。

      我猜外面的桌子是为了让设计居中?也许看看另一种使外部居中的技术。

      【讨论】:

        【解决方案7】:
        <body style="text-align:left;">
        

        像魅力一样工作。而且您不必将其放在整个电子邮件中。

        【讨论】:

          猜你喜欢
          • 2021-06-03
          • 2011-01-11
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-07-31
          • 1970-01-01
          • 2018-04-18
          • 1970-01-01
          相关资源
          最近更新 更多