html - 覆盖 Outlook 中电子邮件标题图像的默认边距/填充

标签 html css email outlook margin

我正在为一封电子邮件编写代码，但主图略微错位且仅在 Outlook 中出现。

The problem

我已经看到并尝试了这个问题的一些答案(将字体大小设置为 0，删除“边距”，为图像添加另一个表格)，但所有答案都已经有好几年了。我认为 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">&nbsp;</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;">&nbsp;</div>
               <![endif]--> 

        <!--[if !(gte mso 9)|(IE)]>
                <div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;">&nbsp;</div>
               <![endif]--> 
    <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="25">&nbsp;</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">&nbsp;</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;">&nbsp;</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;">&nbsp;</div>
                   <![endif]--> 
        <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="25">&nbsp;</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-->

最佳答案

我有这个 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>

关于html - 覆盖 Outlook 中电子邮件标题图像的默认边距/填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48283246/

上一篇：asp.net-mvc-4 - 从局部 View 向 View 头部添加 css、js 或其他内容

下一篇：javascript - CSS/SCSS/JS : Dynamic height fixed header

相关文章：

php - 良好的电子邮件链接保护方法

html - CSS页脚，留在页面底部而不是屏幕底部

javascript - 使用 JavaScript(可能是 CSS)在特定宽度/高度的 HTML5 Canvas 中显示完整图像尺寸(100% 宽度/高度)

CSS 属性框阴影不适用于白色

c# - 通过 Java(或 C#)发送 MAPI 电子邮件

php - 使用部署在 Google App Engine 上的 PHP 应用程序发送邮件

html - 如何不让文字覆盖按钮？

javascript - Notepad++ 无法打开我的 html 文件，而是打开 google 主页

javascript - HTML 如何使用 JavaScript 显示计时器？

css - CMYK 值作为背景颜色

©2024 IT工具网  联系我们