Outlook 2007+ (07,10,13,16,19)가 내가 작성한 이메일을 렌더링 할 수 있도록 많은 수정을 시도했습니다.
문서 및 테이블 재설정을 시도했습니다. 나는 spans, font, p & td와 같은 많은 다른 컨테이너를 사용하여 텍스트를 포함하려고했습니다. 모두 font-size와 line-height가 지정되었습니다. 메타 태그를 넣고 html 태그를 변경했습니다. 그러나 그것은 무시되고 이메일의 모든 텍스트가 font-size : 16px로 표시됩니다.
내 글꼴이 Outlook 07+ 버전 내에 있도록 코딩 한 것과 동일한 크기로 표시되도록하는 확실한 방법이 있습니까?
내 코드는 다음과 같습니다.
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta content="telephone=no" name="format-detection">
<meta name="ProgId" content="Word.Document" />
<meta name="Generator" content="Microsoft Word 12" />
<meta name="Originator" content="Microsoft Word 12" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<title>blah Terminal</title>
<link href="" rel="icon" type="image/x-icon">
<!--[if mso]>
<style>
.fallback-font {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->
<!--[if gte mso 9]>
<style>
a:visited {
color:#f58220;
}
</style>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
mso-line-height-rule: exactly;
mso-margin-bottom-alt: 0;
mso-margin-top-alt: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
</style>
<![endif]-->
<!--[if gt mso 15]>
<style type="text/css" media="all">
table, tr, td {
border-collapse: collapse;
}
</style>
<![endif]-->
<!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
/* Fonts */
h1,
h2,
h3,
h4,
h5,
h6,
body,
p,
a,
input,
textarea,
button,
input[type=text],
input[type=submit],
table,
td,
div,
span,
* {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold!important;
line-height: inherit;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold!important;
margin:0;
}
body,
p,
a,
input,
textarea,
button,
input[type=text],
input[type=submit],
table,
td,
div,
span {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold!important;
}
/* END Fonts */
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
img {
display: block;
white-space: pre-line;
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
.ExternalClass * {
line-height: 115%;
}
@media only screen and (max-width: 640px) {
table[class=full-width],
img[class=full-width],
table[class=full-width_footer],
a[class=full-width],
div[class=full-width] {
width: 100% !important;
height: auto !important;
}
}
@media only screen and (max-width: 480px) {
table[class=small-full-width],
img[class=small-full-width],
table[class=small-full-width_footer],
a[class=small-full-width],
div[class=small-full-width] {
width: calc(100% - 40px)!important;
height: auto !important;
}
}
@media only screen and (max-width: 640px) {
table[class=full-width-margin] {
width: 100% !important;
height: auto !important;
margin: 0 0 20px !important;
}
}
@media only screen and (max-width: 640px) {
td[class=singleColumn] {
width: 100% !important;
float: left !important;
}
}
@media only screen and (max-width: 640px) {
table[class=hide],
td[class=hide],
tr[class=hide],
span[class=hide] {
display: none !important;
}
}
@media only screen and (max-width: 640px) {
td[class=textJustify],
a[class=textJustify] {
text-align: justify !important;
}
}
@media only screen and (max-width: 640px) {
td[class=textCenter],
a[class=textCenter] {
text-align: center !important;
}
}
@media only screen and (max-width: 640px) {
td[class=textRight],
a[class=textRight] {
text-align: right !important;
}
}
@media only screen and (max-width: 640px) {
div[class=show] {
display: block !important;
}
}
@media only screen and (max-width: 640px) {
td[class=smallTxt],
a[class=smallTxt],
span[class=smallTxt] {
font-size: 11px !important;
}
}
@media only screen and (max-width: 640px) {
td[class=mediumTxt],
a[class=mediumTxt],
span[class=mediumTxt] {
font-size: 14px !important;
}
}
@media only screen and (max-width: 640px) {
td[class=largeTxt],
a[class=largeTxt],
span[class=largeTxt] {
font-size: 18px !important;
}
}
@media only screen and (max-width: 640px) {
table[class=singleColumnMobileShow] {
display: block !important;
visibility: visible !important;
overflow: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
@media only screen and (max-width: 640px) {
tr[class=singleColumnMobileShow] {
display: block !important;
visibility: visible !important;
overflow: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
@media only screen and (max-width: 640px) {
td[class=singleColumnMobileShow] {
display: block !important;
visibility: visible !important;
overflow: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
@media only screen and (max-width: 640px) {
[class=mobile-show] {
overflow: visible !important;
height: auto !important;
display: block !important;
line-height: 100% !important;
}
}
@media only screen and (min-width: 481px) {
div[class=singleColumnMobileShow] {
display: block !important;
visibility: visible !important;
overflow: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
a:visited {
color: #f58220;
}
</style>
<style sh-font-styles="">
/* Generated by SharpSpring -- Do not edit */
[class].font1 {font-family: 'Open Sans',Arial, sans-serif !important;}
[class].font2 {font-family: 'Open Sans',Arial, sans-serif !important;}
</style>
</head>
<body bgcolor="#c6c6c6" class="body" style="margin:0;padding:0 !important;mso-line-height-rule:exactly;">
<!--[if mso]>
<style type="text/css">
body, table, td, a, span {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->
<table width="100%" bgcolor="#c6c6c6" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td align="center" valign="top" width="100%">
<table width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;color:black;">
<tr>
<td width="640" align="center" valign="top">
<table bgcolor="#68659f" width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;">
<tr>
<td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="20" style="display:block;">
</td>
<td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="50" style="display:block;">
</td>
<td width="500" align="center" valign="top">
<table width="500" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:500px;">
<tr>
<td width="500" valign="top" height="20" style="line-height:20px;font-size:20px !important;"> </td>
</tr>
<tr>
<td width="500" align="center" valign="top" style="color:#0d233e;line-height:28px;font-size:24px !important;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;">
<span style="font-size:24px !important;line-height:28px;mso-line-height-alt:32px;">Are you still interested in how</span><br/>
<span style="font-size:24px !important;line-height:28px;mso-line-height-alt:32px;color:#ffffff;">blah Terminal</span> <span style="font-size:24px !important;line-height:28px;">can help you outperform your Investment Management peers?</span>
</td>
</tr>
<tr>
<td width="500" valign="top" height="10" style="line-height:10px;font-size:10px !important;"> </td>
</tr>
<tr>
<td width="500" align="center" valign="top" style="color:#ffffff;font-size:12px !important;line-height:16px;mso-line-height-alt:20px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;">
<span style="font-size:12px !important;line-height:16px;mso-line-height-alt:20px;">blah Terminal is the smarter platform for Investment Professionals. Innovative design and one-click navigation bring important events to your attention and helps you perform your role more efficiently.</span>
</td>
</tr>
<tr>
<td width="500" valign="top" height="20" style="line-height:20px;font-size:20px !important;"> </td>
</tr>
<tr>
<td width="500" align="center" valign="top">
<div class="small-full-width">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://free-trial.blahterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="v-text-anchor:middle;width:320px;" arcsize="25%" stroke="f" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<![endif]-->
<a class="small-full-width" href="https://free-trial.blahterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="background-color:#ffffff;border-radius:10px;color:#24508c;display:inline-block;font-family:Helvetica,Arial,sans-serif !important;font-size:12px !important;font-weight:bold;text-align:center;text-decoration:none;width:320px;padding:10px 5px;-webkit-text-size-adjust:none;">GET YOUR FREE TRIAL OF blah TERMINAL</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td width="500" valign="top" height="30" style="line-height:30px;font-size:30px !important;"> </td>
</tr>
</table>
</td>
<td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="50" style="display:block;">
</td>
<td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="20" style="display:block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
결과는 다음과 같습니다.
If you refer to this image you can see the big title is displayed at a much smaller size on the outlook 2007+ versions.
Edit: The solution turned out to be, make sure I am applying the styles in the head using a class as well as by targeting attributes (some engines must ignore targeting of elements). Along with removing all inline-style uses of !important.
Here is an updated snippet for you to see:
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta content="telephone=no" name="format-detection">
<meta name="ProgId" content="Word.Document" />
<meta name="Generator" content="Microsoft Word 12" />
<meta name="Originator" content="Microsoft Word 12" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<title>Example Terminal</title>
<link href="" rel="icon" type="image/x-icon">
<!--[if mso]>
<style>
.fallback-font {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->
<!--[if gte mso 9]>
<style>
a:visited {
color:#f58220;
}
</style>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
mso-line-height-rule: exactly;
mso-margin-bottom-alt: 0;
mso-margin-top-alt: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
</style>
<![endif]-->
<!--[if gt mso 15]>
<style type="text/css" media="all">
table, tr, td {
border-collapse: collapse;
}
</style>
<![endif]-->
<!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
/* Fonts */
h1,
h2,
h3,
h4,
h5,
h6,
body,
p,
a,
input,
textarea,
button,
input[type=text],
input[type=submit],
table,
td,
div,
span,
*,
.base {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold!important;
line-height: inherit;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold!important;
margin:0;
}
body,
p,
a,
input,
textarea,
button,
input[type=text],
input[type=submit],
table,
td,
div,
span {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold!important;
}
/* END Fonts */
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
img {
display: block;
white-space: pre-line;
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
.ExternalClass * {
line-height: 115%;
}
@media only screen and (max-width: 640px) {
table[class=full-width],
img[class=full-width],
table[class=full-width_footer],
a[class=full-width],
div[class=full-width] {
width: 100% !important;
height: auto !important;
}
}
@media only screen and (max-width: 480px) {
table[class=small-full-width],
img[class=small-full-width],
table[class=small-full-width_footer],
a[class=small-full-width],
div[class=small-full-width] {
width: calc(100% - 40px)!important;
height: auto !important;
}
}
@media only screen and (max-width: 640px) {
table[class=full-width-margin] {
width: 100% !important;
height: auto !important;
margin: 0 0 20px !important;
}
}
@media only screen and (max-width: 640px) {
td[class=singleColumn] {
width: 100% !important;
float: left !important;
}
}
@media only screen and (max-width: 640px) {
table[class=hide],
td[class=hide],
tr[class=hide],
span[class=hide] {
display: none !important;
}
}
@media only screen and (max-width: 640px) {
td[class=textJustify],
a[class=textJustify] {
text-align: justify !important;
}
}
@media only screen and (max-width: 640px) {
td[class=textCenter],
a[class=textCenter] {
text-align: center !important;
}
}
@media only screen and (max-width: 640px) {
td[class=textRight],
a[class=textRight] {
text-align: right !important;
}
}
@media only screen and (max-width: 640px) {
div[class=show] {
display: block !important;
}
}
@media only screen and (max-width: 640px) {
td[class=smallTxt],
a[class=smallTxt],
span[class=smallTxt] {
font-size: 11px !important;
}
}
@media only screen and (max-width: 640px) {
td[class=mediumTxt],
a[class=mediumTxt],
span[class=mediumTxt] {
font-size: 14px !important;
}
}
@media only screen and (max-width: 640px) {
td[class=largeTxt],
a[class=largeTxt],
span[class=largeTxt] {
font-size: 18px !important;
}
}
@media only screen and (max-width: 640px) {
table[class=singleColumnMobileShow] {
display: block !important;
visibility: visible !important;
overflow: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
@media only screen and (max-width: 640px) {
tr[class=singleColumnMobileShow] {
display: block !important;
visibility: visible !important;
overflow: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
@media only screen and (max-width: 640px) {
td[class=singleColumnMobileShow] {
display: block !important;
visibility: visible !important;
overflow: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
@media only screen and (max-width: 640px) {
[class=mobile-show] {
overflow: visible !important;
height: auto !important;
display: block !important;
line-height: 100% !important;
}
}
@media only screen and (min-width: 481px) {
div[class=singleColumnMobileShow] {
display: block !important;
visibility: visible !important;
overflow: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
a:visited {
color: #f58220;
}
</style>
<style sh-font-styles="">
/* Generated by SharpSpring -- Do not edit */
[class].font1 {font-family: 'Open Sans',Arial, sans-serif !important;}
[class].font2 {font-family: 'Open Sans',Arial, sans-serif !important;}
</style>
</head>
<body bgcolor="#c6c6c6" class="body" style="margin:0;padding:0;mso-line-height-rule:exactly;">
<!--[if mso]>
<style type="text/css">
body, table, td, a, span {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
<![endif]-->
<table width="100%" bgcolor="#c6c6c6" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td align="center" valign="top" width="100%">
<table width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;color:black;">
<tr>
<td width="640" align="center" valign="top">
<table bgcolor="#68659f" width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;">
<tr>
<td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="20" style="display:block;">
</td>
<td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="50" style="display:block;">
</td>
<td width="500" align="center" valign="top">
<table width="500" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:500px;">
<tr>
<td width="500" valign="top" height="20" style="line-height:20px;font-size:20px;"> </td>
</tr>
<tr>
<td class="base" width="500" align="center" valign="top" style="color:#0d233e;line-height:28px;font-size:24px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">
<span class="base" style="font-size:24px;line-height:28px;mso-line-height-alt:32px;">Are you still interested in how</span><br/>
<span class="base" style="font-size:24px;line-height:28px;mso-line-height-alt:32px;color:#ffffff;">Example Terminal</span> <span class="base" style="font-size:24px;line-height:28px;">can help you outperform your Investment Management peers?</span>
</td>
</tr>
<tr>
<td width="500" valign="top" height="10" style="line-height:10px;font-size:10px;"> </td>
</tr>
<tr>
<td class="base" width="500" align="center" valign="top" style="color:#ffffff;font-size:12px;line-height:16px;mso-line-height-alt:20px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">
<span class="base" style="font-size:12px;line-height:16px;mso-line-height-alt:20px;">Example Terminal is the smarter platform for Investment Professionals. Innovative design and one-click navigation bring important events to your attention and helps you perform your role more efficiently.</span>
</td>
</tr>
<tr>
<td width="500" valign="top" height="20" style="line-height:20px;font-size:20px;"> </td>
</tr>
<tr>
<td width="500" align="center" valign="top">
<div class="small-full-width">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://free-trial.Exampleterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="v-text-anchor:middle;width:320px;" arcsize="25%" stroke="f" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<![endif]-->
<a class="small-full-width base" href="https://free-trial.Exampleterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="background-color:#ffffff;border-radius:10px;color:#24508c;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:bold;text-align:center;text-decoration:none;width:320px;padding:10px 5px;-webkit-text-size-adjust:none;">GET YOUR FREE TRIAL OF Example TERMINAL</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td width="500" valign="top" height="30" style="line-height:30px;font-size:30px;"> </td>
</tr>
</table>
</td>
<td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="50" style="display:block;">
</td>
<td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="20" style="display:block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Working code in action:
Massive thank you to contributors, saved me so much hassle! <3
추가 한 모든 인라인! 중요한 문을 제거하십시오. 이로 인해 Outlook에서 문제가 발생합니다.
이유는 확실하지 않지만 (인라인! 중요한 명령문이 유효하지 않을 수 있음) 객체 초기 상태에서는 필요하지 않습니다.
! important는 개체의 초기 상태를 덮어 쓰는 헤드에서만 사용해야합니다.
또한 머리 CSS의 속성 선택기에서 멀어 질 것입니다. 구식이며 더 이상 모든 곳에서 작동하지 않을 수 있습니다. 간단히 일반 클래스 선언으로 변환합니다.
예 : table[class=full-width]
이된다 .full-width
.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다