Outlook Web响应电子邮件 [英] Outlook web responsive email
本文介绍了Outlook Web响应电子邮件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
响应电子邮件模板不显示按钮，并且页脚在Outlook Web上未正确对齐.附带的是Outlook Web中结果的代码和屏幕截图以及gmail Web中显示的所需输出.我需要帮助修复它的外观.
Responsive Email Template doesn't show buttons and footer isn't aligned properly on outlook web. Attached is the code and screen shot of the result in outlook web and the desired output as displayed in gmail web. I need help in fixing it for outlook.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- For development, pass document through inliner -->
<!--<link rel="stylesheet" href="css/simple.css" />-->
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
line-height: 1.65; }
img {
max-width: 100%;
margin: 0 auto;
display: block; }
body,
.body-wrap {
width: 100% !important;
height: 100%;
background: #efefef;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none; }
a {
color: #f08414;
text-decoration: none; }
.text-center {
text-align: center; }
.text-right {
text-align: right; }
.text-left {
text-align: left; }
.button {
display: inline-block;
color: white;
background: #f6c095;
border: solid #f6c095;
border-width: 10px 20px 8px;
/*font-weight: bold;*/
border-radius: 4px; }
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
line-height: 1.25; }
h1 {
font-size: 25px; }
h2 {
font-size: 28px; }
h3 {
font-size: 24px; }
h4 {
font-size: 18px; }
h5 {
font-size: 16px; }
p, ul, ol {
font-size: 16px;
font-weight: normal;
margin-bottom: 20px; }
.container {
display: block !important;
clear: both !important;
margin: 0 auto !important;
max-width: 580px !important; }
.container table {
width: 100% !important;
border-collapse: collapse; }
.container .masthead {
padding: 80px 0;
background: #3d4a7c;
color: white; }
.container .masthead h1 {
margin: 0 auto !important;
max-width: 90%;
/*text-transform: uppercase;*/ }
.container .content {
background: white;
padding: 30px 35px; }
.container .content.footer {
background: none; }
.container .content.footer p {
margin-bottom: 0;
color: #888;
text-align: center;
font-size: 14px; }
.container .content.footer a {
color: #888;
text-decoration: none;
font-weight: bold; }
#contactmanager {
display: inline-block;
color: white;
background: #3d4a7c;
border: solid #3d4a7c;
border-width: 10px 20px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td class="container">
<!-- Message start -->
<br />
<table>
<tr>
<td align="center">
<img alt="accesbank-logo" src="images/accessbank.png"/>
</td>
</tr>
</table>
<br/>
</td>
</tr>
<tr>
<td class="container">
<!-- Message start -->
<table>
<tr>
<td align="center" class="masthead">
<h1>High Account Balance</h1>
</td>
</tr>
<tr>
<td class="content">
<h4>Dear Emmanuel Onyeje</h4>
<p>Access Bank Checking Account has a high balance of #X. Consider investing this in a higher yielding account such as a fixed/call deposit </p>
<p><em>– Bank Team</em>
</p>
<table>
<tr>
<td align="center">
<p>
<a href="#" id="contactmanager" class="button">Contact Account Manager</a>
<a href="#" class="button">Ignore Advice</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="container">
<!-- Message start -->
<table>
<tr>
<td class="content footer" align="center">
<p>Copyright © 2016 <a href="https://www.accessbankplc.com">Access Bank</a>,Powered by <a href="http://neuronah.com">Molib</a>
</p>
<p>If you do not want to recieve emails from us, you can | <a href="#">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
推荐答案
听起来像您需要防弹电子邮件按钮！可能会收到类似于此电子邮件的按钮，但与具有体面盒模型支持的Web/电子邮件客户端相比，它需要的代码比在Web/电子邮件客户端上要多:
Sounds like you need bulletproof email buttons! It's possible to get buttons like this email, but it requires more code than it would on the web / email clients with decent box model support:
<td align="center">
<!-- Button 1 : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
<tr>
<td style="border-radius: 4px; background: #f6c095; text-align: center;">
<a href="http://www.google.com" style="background: #f6c095; border: 10px 20px 8px 20px; solid #f6c095; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
Contact Account Manager
</a>
</td>
</tr>
</table>
<!-- Button 1 : END -->
<!-- Button 2 : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
<tr>
<td style="border-radius: 4px; background: #3d4a7c; text-align: center;">
<a href="http://www.google.com" style="background: #3d4a7c; border: 10px 20px 8px 20px; solid #3d4a7c; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
Ignore Advice
</a>
</td>
</tr>
</table>
<!-- Button 2 : END -->
</td>
这是一些类似的技术之一，在石蕊上概述.
这篇关于Outlook Web响应电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
