HTML电子邮件呈现在IE中居中的文本

前端之家收集整理的这篇文章主要介绍了HTML电子邮件呈现在IE中居中的文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在从Outlook发送一封 HTML电子邮件到我的mail.live.com帐户.当我使用Firefox查看mail.live.com中的结果时,电子邮件看起来没问题,但是当我使用IE时,所有内容都是居中的.

添加了很多align = left和inline 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,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中的所有Web电子邮件客户端中以居中文本呈现.有趣的是,如果我从IE 9中的Gmail或Yahoo发送电子邮件,它会正确呈现(没有添加所有额外的对齐/文本对齐左侧).但是,此电子邮件必须源自Outlook,因此在这种情况下这不是一种可行的解决方法.

解决方法

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

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

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

猜你在找的HTML相关文章