Question

自适应电子邮件模板并不显示按钮和页脚在Outlook网络上未正确对齐。附件是outlook web中的结果的代码和屏幕截图以及gmail web中显示的所需输出。我需要帮助修复它的前景。

<!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 &#169; 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>

Answer 1

听起来你需要防弹电子邮件按钮！有可能获得这样的电子邮件按钮，但它需要的代码比具有良好的盒子模型支持的网络/电子邮件客户端要多：

<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>

这是少数类似技术之一outlined on Litmus。

Answer 2

为此，我使用表格：

{{1}}

Outlook Web响应电子邮件

2 个答案: