覆盖Outlook中电子邮件标题图像的默认边距/填充
我正在编写电子邮件，并且英雄图片略有错位，仅在Outlook中。
我已经看过并尝试过这个问题的一些答案（将字体大小设置为0，删除＆＃34;边距＆＃34;为图像添加另一个表格），但所有的答案几岁了。我认为Outlook中的新更新导致了这个问题。
我的代码在这里：
<!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" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
}
</style>
<![endif]-->
</head>
<body style="background-color:#eeeeee; Margin:0; padding:0; min-width:100%;">
<style type="text/css">
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
*[class=mobile]{display:none;}
@media only screen and (max-width:650px) {
*[class=desktop]{display:none !important;
background:none!important;}
}
@media only screen and (max-width: 649px) {
*[class="column"],
*[class="two-column"] {
width: 100%!important;
max-width: 649px!important;
}
*[class="rightrail"] {
max-width: 100%!important;
}
*[class="rightrail"] img {
width: 100%!important;
}
*[class="nomobile"] {
overflow: hidden !important;
float: none !important;
display: none !important;
line-height:0% !important;
}
}
@media only screen and (max-width: 500px) {
[class*=wrapper] .app {
width: 70%!important;
}
[class*=wrapper] .app-text span {
font-size:15px!important;
font-weight:bold;
}
[class*=wrapper] .app-text span span {
font-size:7px!important;
font-weight:bold;
}
*[class=desktop]{
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
text-align: center;!Important;
}
div[class=desktop]{
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
margin: 0 auto!important;
text-align:center!important;
}
*[class="mobileonly"] {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
}
*[class=desktop] table {
display: inline-block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
width: 100%!important;
text-align: center!Important;
margin: 0 auto;
max-width: 140px!important;
}
*[class="padding"] {
padding: 0 5% !important;
}
*[class=desktop] a {
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
padding: 8px 20px!important;
}
*[class="column"],
*[class="two-column"] {
width: 90%!important;
}
}
</style>
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; background-color: #eeeeee">
<br class="nomobile">
<!--Pre Header-->
<div class="header" style="max-width:650px;">
<!--[if (gte mso 9)|(IE)]>
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px;">
<tr>
<td style="width: 100%; text-align:center; font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
<tr>
<td width="25"> </td>
<td width="600" valign="top">
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="25"> </td></tr></table>
<![endif]--></td>
</tr>
</table>
</div>
<!--Header-->
<div class="header" style="max-width:650px;">
<!--[if (gte mso 9)|(IE)]>
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px; background-color: #0079c2;">
<tr>
<td style="width: 100%; text-align:center; font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
<tr>
<td width="25"> </td>
<td width="600" valign="top">
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<div style="width:90%; display:inline-block; vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;" >
<tr>
<td width="100%" class="inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0; padding: 0; margin: 0" >
<tr>
<td width="100%" class="inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0; padding: 0; margin: 0" >
<tr>
<td width="30%" align="left"><a href="https://www.bcbst.com/"><img src="http://image.bcbst-email.com/lib/fe9612717c60077f75/m/1/logo-white_2.png" alt="BlueCross BlueShield of Tn" width="134" height="55" border="0" style="display: block; max-width: 134px; color: #ffffff; background: #0079C2; font-size:9px;"/></a></td>
<td width="55%" align="right"><p style="font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color:#ffffff; mso-line-height-rule:exactly; line-height: 12px;"><a href="%%view_email_url%%" style="color: #ffffff; text-decoration:none;">View Online</a></p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="25"> </td></tr></table>
<![endif]--></td>
</tr>
</table>
</div>
<!--Header-->
<!--Hero Image-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; width: 100%; max-width:650px!important; padding: 0 auto;">
<tr>
<td><img src="http://image.bcbst-email.com/lib/fe9612717c60077f75/m/1/Health+Foundation+Header+V2.jpg" style="width:100%; display:block; max-width: 650; color: #0079C2; font-weight:bold; background: #ffffff; font-size:14px;" alt="A New Focus for our Health Foundation" border="0" width="100%" class="hero"></td>
</tr>
</table>
<!--Hero Image-->
1 个答案:
答案 0 :(得分：0)
我有这个CSS Cheatsheet，它将重置不同电子邮件提供商的大多数样式，在你的任何样式之前添加它
/* Client-specific Styles */
#outlook a {
padding: 0;
}
/* Force Outlook to obtain a "view in browser" menu link. */
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing.*/
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table td {
border-collapse: collapse;
}
.removemobile {
display: none;
}
/*STYLES*/
/*################################################*/
/*IPAD STYLES*/
/*################################################*/
@media only screen and (max-width: 612px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #ffffff;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
td[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
table[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
td[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
table[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="logo"] {
width: 100%!important;
float: left;
text-align: center;
margin-bottom: 20px;
}
td[class="menu"] {
width: 100%!important;
float: left;
}
table[class=fullspread] {
width: 100%!important;
clear: both;
}
table[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="buttoncenter"] {
float: none!important;
text-align: center!important;
display: inline-block!important;
clear: both;
}
img[class="imageinline"] {
display: inline!important;
}
img[class="fullwidth"] {
display: inline!important;
width: 100%!important;
}
td[class="paddingtop"] {
padding-top: 15px!important;
}
.buttonleft {
display: inherit!important;
}
.removemobile {
width: 100%!important;
display: block;
}
table[class="halfwidth"] {
width: 50%!important;
}
table[class="mghide"] {
display: none!important;
}
td[class="mghide"] {
display: none!important;
}
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
@media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #ffffff;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
td[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
table[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
td[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
table[class=fullspread] {
width: 100%!important;
clear: both;
}
table[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
table[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="logo"] {
width: 100%!important;
float: left;
text-align: center;
margin-bottom: 20px;
}
td[class="menu"] {
width: 100%!important;
float: left;
}
td[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="buttoncenter"] {
float: none!important;
text-align: center!important;
display: inline-block!important;
clear: both;
}
img[class="imageinline"] {
display: inline!important;
}
img[class="fullwidth"] {
display: inline!important;
width: 100%!important;
}
td[class="paddingtop"] {
padding-top: 15px!important;
}
.buttonleft {
display: inherit!important;
}
.removemobile {
width: 100%!important;
display: block;
}
table[class="halfwidth"] {
width: 50%!important;
}
table[class="mghide"] {
display: none!important;
}
td[class="mghide"] {
display: none!important;
}
}
</style>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？