html - 电子邮件在 Outlook 中无法正确呈现 - 在移动设备上隐藏图像并且不导入字体
问题描述
该电子邮件在 Gmail 和其他电子邮件客户端中运行良好,但在 Outlook 中却一团糟(见附图)。
我无法弄清楚为什么该列在 Outlook 中缩小了
我希望在移动设备上隐藏中间图像并在桌面上显示。
该字体也不会在 Outlook 中导入。
感谢任何建议。谢谢你的时间!
<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="x-apple-disable-message-reformatting">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>google email</title>
<!--[if (mso)|(mso 16)]>
<style type="text/css">
.fallback-text { font-family: arial narrow, sans-serif; }
body, table, td, a, span { font-family: arial narrow, Helvetica, sans-serif !important; }
a { text-decoration: none; }
</style>
<![endif]-->
<style type="text/css">
@media screen {
@font-face {
font-family: 'RobotoCondensed-Regular';
font-style: normal;
font-weight: 400;
src: local('RobotoCondensed-Regular'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v18/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2');
}
.main-header-txt {
font-size: 40px;
font-weight: bold;
}
.paragraph-txt {
;
font-size: 18px;
}
.sub-header-txt {
padding: 10px 10px;
font-size: 30px;
font-weight: bold;
line-height: 30px;
}
.white-sub-header-txt {
padding: 0;
font-size: 30px;
font-weight: bold;
line-height: 30px;
color: #ffffff;
}
a.links-white {
color: #ffffff;
font-size: 18px;
font-weight: bold;
}
.nohide {
display: none;
}
}
@media only screen and (max-width: 640px) {
*[class=desktop]{display:none !important;}
*[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;}
*[class="block"]{display:block !important;padding:5px;}
.deviceWidth {
width: 440px !important;
margin: 0 auto!important;
padding: 0;
}
.b2-padding {
margin: 15px 0px !important;
}
.center {
text-align: center !important;
}
.main-header-txt {
font-size: 40px;
padding: 20px 10px;
line-height: 40px;
font-weight:bold;
}
.hide {
display: none;
}
.img-b2 {
height: auto;
width: 100%;
}
.white-sub-header-txt {
padding: 0;
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #ffffff;
}
.nohide {
display: block;
}
.paragraph-txt {
font-size: 18px;
}
}
</style>
</head>
<body style="width: 100%; background-color: #ffffff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif;">
<!---------------------------------------------------------------------- Header STARTS ---------------------------------------------------------------->
<table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" valign="top" bgcolor="#f8f8f8" style="padding-top: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" bgcolor="#3c3c3b" class="deviceWidth" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#3c3c3b">
<tbody><tr>
<td style="padding: 10px 20px; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" bgcolor="#3c3c3b">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-logo"><img src="https://dummyimage.com/120x90/000/fff" alt="google logo" border="0"></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--header logo-->
<table role="presentation" width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" class="deviceWidth" align="center" valign="top" bgcolor="#f5f5f5" style="padding-top: 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
</td>
</tr>
<tr>
<td align="center" class="deviceWidth fallback-text" style="font-size: 16px; color: #272727; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: middle; padding: 10px 5px 10px 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="middle">
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB2</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB3</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1TAB2</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: red;">TAB4
</a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!---------------------------------------------------------------------- Header ENDS ---------------------------------------------------------------->
<!--banner1-->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#3b3b3c" style="border-collapse: collapse; background-color: #3b3b3c; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td class="mobile" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Banner1-IMAGE">
<img width="100%" max-width="640px" src="https://dummyimage.com/969x626/000/fff" alt="" border="0" style="display:block; width:100%;max-width:640px;" class="deviceWidth">
</a>
</p>
</td>
</tr>
</tbody></table>
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#978B8B" style="border-collapse: collapse; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td colspan="3" width="100%" class="deviceWidth fallback-text" style="text-decoration: none; text-underline: none; color: #ffffff; font-weight: bold; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="30" style="height: 30px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
<span class="main-header-txt">
<b>WRAP UP</b>
</span>
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="10" style="height: 10px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
</td>
</tr>
<tr>
<td width="5%"></td>
<td width="90%" style=" color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; vertical-align: top; font-weight: 300; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
<span class="paragraph-txt">
DummyText
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</span>
</td>
<td width="5%"></td>
</tr>
<tr height="60">
<td colspan="3" class="fallback-text" style="font-size: 16px; color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; text-decoration: underline; vertical-align: top; padding: 0px 15px 15px 15px; font-weight: bold; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" line-height:50px;="" bgcolor="#978B8B" align="center" valign="top">
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<table class="fullwidth" style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td></tr></tbody></table>
</td>
</tr>
</tbody></table>
<!--end banner 1-->
<!--spacer-->
<table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<!-- banner 2-->
<table height="250" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3b3b3c" style="border-collapse: collapse; margin: 10px auto; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td class="center" style="padding: 0 0 0 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Split-Banner-Image1">
<img width="270" height="250" src="https://dummyimage.com/540x500/000/fff&text=left" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="img-b2">
</a>
</p>
</td>
</tr>
</tbody></table>
<table width="100" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="hide" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Split-Banner-Image1">
<img width="100" height="250" src="https://dummyimage.com/200x500/000/fff&text=middle" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="">
</a>
</p>
</td>
</tr>
</tbody></table>
<table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="right" bgcolor="#3b3b3c" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="270" align="center" class="fallback-text" style="text-align: center; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<br>
<br>
<p>new new new new new</p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--end banner 2-->
<!--spacer-->
<table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<!----------------------------------------------------------------- footer STARTS here --------------------------------------------------------------------------------->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="fallback-text device" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td bgcolor="#363636" style="padding: 10px 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" border="0" cellpadding="10" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; font-weight: normal; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 26px; vertical-align: top; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
<br>
</td>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="right" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<a target="_blank" href="https://itunes.apple.com/gb/app/apple-store/id1039829129?mt=8" style="border:0;"></a>
</td>
<td width="10" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td>
<td align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<a target="_blank" href="https://play.google.com/store/apps/details?id=uk.co.google.hybrid&hl=en_GB" style="border:0;"></a>
</td>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="text-decoration: none; text-underline: none; font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
</td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; line-height: 15px; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
g xn fcn hgch c h <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none; ">%%emailaddr%%</span>
<br><br>
If you do not wish to receive our newsletters, please <br><br>
chmchmcgmn
<span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none;"><font color="#999999">mhgck</font></span> hcgv
<br><br>
mhgcmcg <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; text-align:center;" href="http://www.google.co.uk/h/option/terms_conditions/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-termsandconditions" target="_blank"></a> & <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; font-weight: normal; color: #999999; text-align:center;" href="http://www.google.co.uk/h/option/PrivacyPolicy/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-privacypolicy" target="_blank"><span style="text-decoration: underline; color: #999999">
</span></a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!----------------------------------------------------------------- footer ENDS here --------------------------------------------------------------------------------->
</body></html>
解决方案
当您应该为桌面使用硬像素值时,您似乎只使用宽度百分比。许多桌面客户端(尤其是 Outlook)需要硬像素值。您是移动设备,可以使用百分比,因为所有这些客户端都读取 %。
例如,您的一张表的修改版本。其中是宽度的硬像素值和一个媒体查询类,它使所有不是设置桌面大小的东西的宽度为 100%。您所有的移动课程也应该有 !important 标签,以防止某些电子邮件客户端覆盖它们。
<table role="presentation" width="640" class="wrapper" border="0" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td >
This is my text
</td>
</tr>
</table>
@media only screen and (max-width: 639px) {
.wrapper {
width: 100% !important;
}
}
推荐阅读
- airflow - 气流:如何实现动态 html_content
- json - Shell 脚本 - 从 JSON 获取值
- javascript - 如何从json字符串的属性中删除单引号
- docker - Docker (KIND) 中的 Kubernetes 在哪里映射其在windwos 10 上的卷挂载
- node.js - Azure Database for MySQL - webapp nodejs
- javascript - Typescript 中的 React Hooks
- javascript - 如何使用 ReactJS 在用户滚动时更新 array.length 计数器
- r - R Studio - 带有名称和年份的数据框,如何添加以前所有年份的列?
- r - R:在 tidyr 的数据透视函数中使用“.value”时为错误的变量名指定附加后缀?
- c# - WPF | 单击外部但弹出窗口无法关闭