问题
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>
回答1:
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>
This is one of a few similar techniques, outlined on Litmus.
回答2:
For this, i use a table :
<table cellpadding="0" cellspacing="0" border="0" width="150" bgcolor="#000000" class="cta-black" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; border-collapse: collapse; mso-padding-alt: 0pt 0pt 0pt 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; background: #000000;">
<tbody>
<tr>
<td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;"> </td>
</tr>
<tr>
<td align="center" mc:edit="selection-1-cta" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"><a href="#" target="_blank" style="border: none; color: #ffffff; text-decoration: none; outline: none !important; font-family: 'Montserrat', sans-serif; font-size: 13px; display: block;">VOIR LE PRODUIT</a></td>
</tr>
<tr>
<td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;"> </td>
</tr>
</tbody>
</table>
来源：https://stackoverflow.com/questions/42249686/outlook-web-responsive-email