8

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

我添加了很多align=left 内联 CSSstyle='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,因此在这种情况下这不是可行的解决方法。

4

7 回答 7

6

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

于 2012-03-21T02:01:51.700 回答
4

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

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

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

于 2011-08-17T22:42:56.053 回答
4

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

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

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

干杯

于 2012-03-16T12:50:27.220 回答
3

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

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

于 2011-08-17T22:40:23.717 回答
3

我知道这个问题很老,但为了将来参考,我确实注意到包含正文没有指定 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>
于 2012-03-19T21:52:48.737 回答
1

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

作为一般的经验法则,将您的页面编码为 1999 年,我发现活动监视器资源非常宝贵。

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

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

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

别担心我不为竞选班长工作!只是我发现有用的东西。

您可以尝试以下几件事:

也许将您的文本包装在 div 中并放入内联文本对齐:左。或者也许在 p 标签上。

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

于 2012-03-22T22:13:52.643 回答
0
<body style="text-align:left;">

奇迹般有效。而且您不必将其放在整个电子邮件中。

于 2015-03-19T15:06:31.803 回答