我知道之前有人问过这个问题,我想我几乎尝试了其他人建议的所有方法。但这是我的问题:
我必须用 Outlook 发送 html 电子邮件(不是在浏览器中,是办公套件的一部分),这不是一个选择。我使用表格,在表格等中。为了使电子邮件居中,我使用 table align="center"
,也尝试将其放在 td 上,没有不同的结果。无论我做什么,当我尝试将 text-align=left;
放在该表内的任何内容上时,当在 IE 中查看时,它会在 Gmail 和 Outlook 中将文本居中....在 Firefox 和 Chrome 中它看起来正常情况下我的文本左对齐,但只有在 IE 中才会这样做。问题是,我们要将其发送给的人只能使用 IE 和 Outlook,以及 Gmail....
我已经尝试了好几天了,没有任何效果,我已经尝试了很多其他人的提示,但没有任何效果。
就像下一个例子不起作用一样简单:
<table width="600" align="center">
<tr>
<td align="left" style="text-align:left;">Some text</td>
</tr>
</table>
即使是我读过的教程中的模板也会出现同样该死的错误。 任何人都知道如何解决这个问题,或者我注定要失败,因为这封电子邮件必须从 Outlook 和他的 Word 渲染引擎发送......并且必须在 IE 中查看......也可以通过 gmail ...... ..
我尝试了慷慨的 Gortonington 给我的确切代码:
<!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>Testing</title>
<style type="text/css">
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%} /**This is to center your email in Outlook.com************/
.ExternalClass {width: 100%;}
</style>
</head>
<body style="margin:0; padding:0;background-color:#CCCCCC;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="left">
Your text here... Lalalalalal Lalalalala Lalalalala
<br/>
lalalalalalalalala
<br/>
lalalalala
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我用 Outlook (Microsoft Office Professional Plus 2010) 邮寄它 --> 这就是我们的工作方式
在浏览器 IE (10) 中的 Gmail 和旧 Hotmail/新 Outlook 中的结果仍然是居中文本。我想张贴图片,但我没有足够的声誉...
更新: 根据要求,IE 中的代码 Outlook.com 构成电子邮件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<html class="m_ul fh hnl useCss3" xml:lang="nl" lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head><style>
*
{
line-height: 142%;
}
body
{
color: #000;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif;
font-size: 88%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
direction: ltr;
background-image: none;
background-repeat: repeat;
background-position-x: left;
background-position-y: top;
background-color: rgb(255, 255, 255);
}
p
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1.35em;
margin-left: 0px;
}
html.fh
{
overflow-y: hidden;
}
html.fh .c_base
{
left: 0px;
top: 40px;
right: 0px;
bottom: 0px;
position: absolute;
overflow-x: visible;
overflow-y: auto;
min-width: 964px;
}
html.hnl.fh .c_base
{
top: 50px;
}
div.c_main
{
margin-top: auto;
margin-right: 0px;
margin-bottom: auto;
margin-left: 0px;
}
::selection
{
color: #fff;
background-color: rgb(0, 114, 198);
}
.t_mbgc, #c_h_theme_m
{
background-color: rgb(255, 255, 255);
}
.t_qtc, .t_qtc:hover, .t_qtc:visited, .mlRd .t_estc
{
color: #444;
}
body
{
display: none;
}
body
{
display: block !important;
}
body
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.DefaultFont, body, textarea, select, input
{
color: #000;
}
body
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
body
{
margin-top: 0px !important;
border-top-color: currentColor !important;
border-right-color: currentColor !important;
border-bottom-color: currentColor !important;
border-left-color: currentColor !important;
border-top-width: 0px !important;
border-right-width: 0px !important;
border-bottom-width: 0px !important;
border-left-width: 0px !important;
border-top-style: none !important;
border-right-style: none !important;
border-bottom-style: none !important;
border-left-style: none !important;
position: static !important;
}
body.IE_M10
{
-ms-touch-action: pinch-zoom;
}
.ClearBoth
{
clear: both;
}
html.fh .c_base
{
overflow-x: auto;
overflow-y: visible;
min-width: 0px;
}
#pageInbox
{
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
position: absolute;
-ms-touch-action: none;
}
.AppContainer
{
left: 0px;
top: 0px;
width: 100%;
right: 0px;
bottom: 0px;
overflow: hidden;
position: absolute;
}
.v-ReadMessageContainer
{
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding-left: 20px;
position: absolute;
outline-width: medium;
outline-style: none;
outline-color: invert;
-ms-touch-action: manipulation;
}
.FullView .v-ReadMessageContainer
{
left: 0px !important;
top: 0px !important;
right: 0px !important;
}
.ContentRight
{
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
position: absolute;
min-width: 588px;
}
.ContentRightInner
{
left: 0px;
top: 0px;
right: 0px;
position: absolute;
}
.FullView .ContentRightInner
{
bottom: 2.2em;
}
.WithRightRail
{
right: 160px;
min-width: 428px;
}
#ReadMessageScrollableSection
{
outline-width: medium;
outline-style: none;
outline-color: invert;
}
.c-ReadMessage
{
width: 100%;
height: 100%;
margin-right: 20px;
position: relative;
outline-width: medium;
outline-style: none;
outline-color: invert;
}
.c-ReadMessage .rmMessages
{
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding-right: 20px;
position: absolute;
overflow-y: scroll;
}
.c-ReadMessagePart
{
margin-bottom: 20px;
border-top-color: #ccc;
border-top-width: 1px;
border-top-style: solid;
position: relative;
}
.c-ReadMessagePartBody .readMsgBody
{
padding-top: 16px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
overflow-x: auto;
overflow-y: hidden;
-ms-touch-select: grippers;
}
.containsYSizerBar
{
width: 100%;
height: 100%;
position: absolute;
}
.Snippet, .ExternalClass
{
font-family: Calibri,sans-serif;
font-size: 15px;
}
.slideOnResize
{
transition-property: top, left, right;
transition-duration: 367ms, 367ms, 367ms;
transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1), cubic-bezier(0.1, 0.9, 0.2, 1), cubic-bezier(0.1, 0.9, 0.2, 1);
transition-delay: 0s, 0s, 0s;
}
body
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.ExternalClass p.ecxMsoNormal, .ExternalClass li.ecxMsoNormal, .ExternalClass div.ecxMsoNormal
{
font-family: "Calibri","sans-serif";
font-size: 11pt;
}
</style></head>
<body class="t_body ltr SignedIn IE IE_Win Win6 IE_M10 IE_D0 Full RE_Trident NoTouch" id="/ol/mail.fpp" style="cursor: auto;"><div class="AppContainer"><div class="c_base" id="c_base" style="top: 50px;"><div class="c_main" id="c_content"><div id="pageContent"><div class="v-Page" id="pageInbox"><div id="inboxControl0f"><div class="containsYSizerBar"><div class="ContentRight WithRightRail FullView" style="left: 205px;" data-link="class{:~tag.contentRightClass(Layout.IsFullView, Layout.ReadingPaneMode)}"><div class="ContentRightInner t_mbgc t_qtc t_urtc"><div tabindex="-1" class="v-ReadMessageContainer slideOnResize" id="inboxControl0fv-ReadMessageContainer" style="visibility: visible; animation-name: null; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: none;"><div class="c-ReadMessage" data-link="class{readMessageClass: ~tag.Show}"><div tabindex="-1" class="rmMessages ClearBoth" id="ReadMessageScrollableSection"><div class="c-ReadMessagePart ReadMsgContainer HasLayout ClearBoth HideShadows FullPart NoHistory Read RmIc" id="readMessagePartControl398f" data-link="class{:~tag.getHeaderCssClass(IsConversationPart, IsRead, IsDraft, IsTrustedSender, Items.length)}"><div class="c-ReadMessagePartBody" data-link="class{getClass:IsBodyExpanded}">
<div class="readMsgBody">
<div class="ExternalClass MsgBodyContainer" id="bodyreadMessagePartBodyControl403f" data-link="class{:~tag.cssClasses(PlainText, IsContentFiltered)}">
<style>
.ExternalClass p.ecxMsoNormal {
font-family: "Calibri","sans-serif";
font-size: 11pt;
}
.ExternalClass li.ecxMsoNormal {
font-family: "Calibri","sans-serif";
font-size: 11pt;
}
.ExternalClass div.ecxMsoNormal {
font-family: "Calibri","sans-serif";
font-size: 11pt;
}
.ExternalClass a:link {
color: blue;
text-decoration: underline;
}
.ExternalClass span.ecxMsoHyperlink {
color: blue;
text-decoration: underline;
}
.ExternalClass span.ecxMsoHyperlinkFollowed {
color: purple;
text-decoration: underline;
}
.ExternalClass p.ecxMsoAcetate {
font-family: "Tahoma","sans-serif";
font-size: 8pt;
}
.ExternalClass li.ecxMsoAcetate {
font-family: "Tahoma","sans-serif";
font-size: 8pt;
}
.ExternalClass div.ecxMsoAcetate {
font-family: "Tahoma","sans-serif";
font-size: 8pt;
}
.ExternalClass span.ecxE-mailStijl17 {
color: windowtext;
font-family: "Calibri","sans-serif";
}
.ExternalClass span.ecxBallontekstChar {
font-family: "Tahoma","sans-serif";
}
.ExternalClass .ecxMsoChpDefault {
font-family: "Calibri","sans-serif";
}
.ExternalClass div.ecxWordSection1 {
}
</style>
<div class="ecxWordSection1">
<table width="100%" class="ecxMsoNormalTable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm;">
<div align="center">
<table width="600" class="ecxMsoNormalTable" style="width: 450pt; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: white;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm;">
<p class="ecxMsoNormal">
Your text here... Lalalalalal Lalalalala Lalalalala <br />lalalalalalalalala <br />lalalalala <span style="font-size: 12pt;"></span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<p class="ecxMsoNormal">
</p>
<p class="ecxMsoNormal">
</p>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></body></html>
IE 中的 Gmail 的作用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<html class="aAX">
<head><style>
body
{
width: 100%;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
body, td, input, textarea, select
{
font-family: arial,sans-serif;
}
html
{
width: 100%;
height: 100%;
overflow: hidden;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
body
{
width: 100%;
height: 100%;
overflow: hidden;
}
html.aAX
{
overflow: visible;
}
.aAU
{
overflow-x: visible;
background-color: rgb(255, 255, 255);
}
body, td, input, textarea, select
{
font-family: arial,sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nH
{
zoom: 1;
}
.no
{
float: left;
}
.nn
{
float: left;
min-height: 1px;
}
.Bs
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-collapse: collapse;
position: relative;
border-spacing: 0;
}
.Bu
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
vertical-align: top;
}
.aeJ
{
overflow-y: scroll;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: white;
}
.aeF
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
vertical-align: bottom;
}
.ads
{
border-left-color: transparent;
border-left-width: 1px;
border-left-style: solid;
}
.Bk
{
margin-bottom: 10px;
position: relative;
}
.Bk .G2
{
padding-top: 3px;
border-top-color: #cfcfcf;
border-right-color: #cfcfcf;
border-bottom-color: #cfcfcf;
border-left-color: #cfcfcf;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
background-color: transparent;
}
.Bk
{
border-top-color: #efefef;
border-right-color: #efefef;
border-bottom-color: #e2e2e2;
border-left-color: #efefef;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
.aAT, .aAU
{
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: rgb(255, 255, 255);
}
.MsoNormal
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.hx
{
background-color: transparent;
}
.hx .Bk
{
float: none;
}
.hx .adn, .hx .adu, .hx .adf
{
padding-left: 8px;
}
.hx .gs
{
margin-left: 44px;
}
.hx .ky .Bk .G2, .hx .kv .Bk .G2, .hx .h7 .Bk .G2
{
padding-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-color: #d8d8d8;
border-right-color: currentColor;
border-bottom-color: #d8d8d8;
border-left-color: currentColor;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.hx .h7 .Bk .G2 .adn
{
padding-bottom: 20px;
}
.hx .h7 .Bk, .hx .kv .Bk, .hx .ky .Bk
{
margin-bottom: 0px;
}
.hx .ky .Bk, .hx .kv .Bk, .hx .h7 .Bk, .hx .kQ .Bk
{
border-right-color: currentColor;
border-bottom-color: currentColor;
border-left-color: currentColor;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.hx .ii
{
padding-bottom: 5px;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 0px;
}
.adn
{
padding-bottom: 0px;
}
.hx
{
color: #222;
padding-top: 4px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 8px;
}
.h7
{
padding-bottom: 0px;
max-width: 100000px;
}
.iY
{
width: 100%;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: rgb(255, 255, 255);
}
.if
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 1px;
padding-left: 0px;
}
.gt
{
font-size: 80%;
}
.ii
{
padding-bottom: 20px;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
position: relative;
direction: ltr;
}
.g
{
color: #222;
}
.AO
{
position: relative;
}
.iY
{
position: static !important;
}
.hx
{
padding-left: 4px;
}
.aHU
{
position: relative;
}
.if
{
margin-top: 0px;
margin-right: 30px;
margin-bottom: 0px;
margin-left: 0px;
}
.aBU, .hx .ky, .hx .kv, .hx .h7, .hx .kQ, .adx
{
outline-width: medium;
outline-style: none;
outline-color: invert;
}
.MsoNormal
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.hx
{
min-width: 502px;
}
html.aAX
{
overflow: hidden;
}
body.aAU
{
overflow-x: hidden;
overflow-y: hidden !important;
}
.aeJ, .age
{
padding-right: 15px;
}
.hx
{
padding-left: 0px;
}
div.m14daf49cca364ccb p.MsoNormal, div.m14daf49cca364ccb li.MsoNormal, div.m14daf49cca364ccb div.MsoNormal
{
font-family: "Calibri","sans-serif";
font-size: 11pt;
margin-top: 0cm;
margin-right: 0cm;
margin-bottom: 0pt;
margin-left: 0cm;
}
</style></head>
<body class="aAU"><div style="position: relative; min-height: 100%;"><div class="nH" style="width: 1280px;"><div class="nH" style="position: relative;"><div class="nH"><div class="no"><div class="nH nn" style="width: 1075px;"><div class="nH"><div class="nH"><div class="ar4 z"><div class="AO"><div class="Tm aeJ" id=":4" style="height: 805px;" unselectable="on"><div class="aeF" id=":2" style="min-height: 377px;"><div class="nH"><div class="nH" role="main"><div class="nH g id"><table class="Bs nH iY" role="presentation" cellpadding="0"><tbody><tr><td class="Bu"><div class="nH if"><div class="nH aHU"><div class="nH hx"><div class="nH"><div tabindex="-1" class="h7 ie nH oy8Mbf"><div class="Bk"><div class="G3 G2"><div><div id=":p8"><div class="adn ads"><div class="gs"><div class="ii gt m14daf49cca364ccb adP adO" id=":pa"><div class="a3s" id=":p9" style="overflow: hidden;"><div lang="NL-BE" vlink="purple" link="blue"><div><table width="100%" style="width: 100%;" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td style="padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm;">
<div align="center">
<table width="600" style="width: 450pt; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: white;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm;">
<p class="MsoNormal">
Your text here... Lalalalalal Lalalalala Lalalalala <br />lalalalalalalalala <br />lalalalala <span style="font-size: 12pt;"><u></u><u></u></span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td></tr></tbody></table></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></td></tr></tbody></table></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></body></html>
最佳答案
我有同样的问题,我知道如何,不知道为什么,但把它放在 head 标签中解决了问题 注意:您必须将文本放在 P 标签中
<!--[if gte mso 9]>
<style type="text/css">
p {
text-align: justify
}
</style>
<![endif]-->
关于css - 从 Outlook 文本左对齐发送的 html 电子邮件在 gmail IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28564525/