【发布时间】：2017-03-04 13:21:28
【问题描述】：
我正在根据下一个模板创建 HTML 电子邮件模板：transactional html email templates，特别是：this one.
我使用zurb foundation inliner 内联了我的css，并将模板托管在SendGrid 上。
Inline HTML/CSS:
<!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 style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta name="viewport" content="width=device-width" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<title style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">Alerts e.g. approaching your limit</title>
</head>
<body style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:1.6;margin:0;padding:0;width:100%!important">
<style type="text/css">
@media only screen and (max-width:640px) {
h1,
h2,
h3,
h4 {
font-weight: 600!important;
margin: 20px 0 5px!important
}
h1 {
font-size: 22px!important
}
h2 {
font-size: 18px!important
}
h3 {
font-size: 16px!important
}
.container {
width: 100%!important
}
.content,
.content-wrapper {
padding: 10px!important
}
.invoice {
width: 100%!important
}
}
</style>
<table class="body-wrap" style="background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;width:100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
<td class="container" style="box-sizing:border-box;clear:both!important;display:block!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto!important;max-width:600px!important;padding:0;vertical-align:top"
width="600">
<div class="content" style="box-sizing:border-box;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto;max-width:600px;padding:20px">
<table cellpadding="0" cellspacing="0" class="main" style="background:#fff;border:1px solid #e9e9e9;border-radius:3px;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="alert alert-warning" style="background:#ff9f00;border-radius:3px 3px 0 0;box-sizing:border-box;color:#fff;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;margin:0;padding:20px;text-align:center;vertical-align:top">Warning: You're approaching your limit. Please upgrade.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-wrap" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;vertical-align:top">
<table cellpadding="0" cellspacing="0" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">You have <strong style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">1 free report</strong> remaining.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Add your credit card now to upgrade your account to a premium plan to ensure you don't miss out on any reports.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top"><a class="btn-primary" href="http://www.mailgun.com" style="background-color:#348eda;border:solid #348eda;border-radius:5px;border-width:10px 20px;box-sizing:border-box;color:#FFF;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;line-height:2;margin:0;padding:0;text-align:center;text-decoration:none;text-transform:capitalize">Upgrade my account</a></td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Thanks for choosing Acme Inc.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="box-sizing:border-box;clear:both;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;width:100%">
<table style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="aligncenter content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0 0 20px;text-align:center;vertical-align:top"><a href="http://www.mailgun.com" style="box-sizing:border-box;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0;text-decoration:underline">Unsubscribe</a> from these alerts.</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
</tr>
</tbody>
</table>
</body>
</html>问题：如何修复按钮以在 Outlook for Android 上按预期显示？
请注意，这不会发生在桌面 Outlook 应用程序和 iOS 的 Outlook 应用程序上。
【问题讨论】：
标签： android html css email outlook