Outlook 中的 HTML 电子邮件按钮对齐方式

2024-06-20

我在为客户构建的 HTML 电子邮件中调整号召性用语按钮时遇到一些问题。按钮显示在左侧且未正确填充。

这是它们在我的浏览器和大多数电子邮件客户端中的显示方式：

它们在 Outlook 2016 中的显示方式如下：

这是我的 Inky 标记：

<row class="call-to-actions">
    <columns small="6">
        <spacer size="50"></spacer>
        <button class="facebook float-right" href="#">Like on Facebook</button>
        <spacer size="50"></spacer>
    </columns>
    <columns small="6">
        <spacer size="50"></spacer>
        <button class="twitter" href="#">Follow on Twitter</button>
        <spacer size="50"></spacer>
    </columns>
</row>

我的 SASS 按钮：

table {
  &.button {
    table {
      td {
        background: transparent !important;
      }
    }
    &.facebook {
      table {
        background-color: #3b5998;
        td {
          a {
            background-color: #3b5998;
            border: none;
            line-height: 30px;
          }
        }
      }
    }

    &.twitter {
      table {
        background-color: #1da1f2;
        td {
          background-color: #1da1f2;
          a {
            background-color: #1da1f2;
            border: none;
            line-height: 30px;
          }
        }
      }
    }
  }
}

我正在使用 Foundation for Email 将标记编译为电子邮件友好的 HTML。生成的输出是这样的：

<table class="row call-to-actions" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">

  <tbody>
    <tr style="padding:0;text-align:left;vertical-align:top">
      <th class="small-6 large-6 columns first"
      style="Margin:0 auto;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:16px;padding-right:10px!important;text-align:left;width:274px">

        <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
          <tbody>
            <tr style="padding:0;text-align:left;vertical-align:top">
              <th style="Margin:0;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left">

                <table class="spacer"
                style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"
                      height="50px"></td>
                    </tr>
                  </tbody>
                </table>
                <table class="button facebook float-right"
                style="Margin:0;border-collapse:collapse;border-spacing:0;float:right;margin:0;padding:0;text-align:left;vertical-align:top;width:auto">

                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">

                        <table style="background-color:#3b5998;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">

                          <tbody>
                            <tr style="padding:0;text-align:left;vertical-align:top">
                              <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;border:none;border-collapse:collapse!important;color:#fff;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">

                                <a href="#"
                                style="Margin:0;background-color:#3b5998;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none">
                                Like on Facebook</a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table class="spacer"
                style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"
                      height="50px"></td>
                    </tr>
                  </tbody>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </th>
      <th class="small-6 large-6 columns last"
      style="Margin:0 auto;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:10px!important;padding-right:16px;text-align:left;width:274px">

        <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
          <tbody>
            <tr style="padding:0;text-align:left;vertical-align:top">
              <th style="Margin:0;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left">

                <table class="spacer"
                style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td>
                    </tr>
                  </tbody>
                </table>
                <table class="button twitter"
                style="Margin:0;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:left;vertical-align:top;width:auto">

                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">

                        <table style="background-color:#1da1f2;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">

                          <tbody>
                            <tr style="padding:0;text-align:left;vertical-align:top">
                              <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;background-color:#1da1f2;border:none;border-collapse:collapse!important;color:#fff;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">

                                <a href="#"
                                style="Margin:0;background-color:#1da1f2;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none">
                                Follow on Twitter</a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table class="spacer"
                style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td>
                    </tr>
                  </tbody>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </th>
    </tr>
  </tbody>
</table>

我缺少什么？

paddingOutlook 2007-2016 的支持存在问题。它根本不适用于 Notes。

https://www.campaignmonitor.com/css/box-model/padding/ https://www.campaignmonitor.com/css/box-model/padding/

line-heightOutlook 也有问题。

https://www.campaignmonitor.com/css/text-fonts/line-height/ https://www.campaignmonitor.com/css/text-fonts/line-height/

我可能会尝试设置<td height="30">到您的 href 的父级，以便您获得按钮的高度，“在 Facebook 上点赞”。

此外，font-family:'Circular Book'不适用于 Outlook。网络字体支持也有问题。有些字体可以使用，但具有两个不网络安全名称的字体会导致 Outlook 恢复为网络安全字体 Times New Roman。

祝你好运。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Outlook

zurbfoundation

htmlemail

inky

Outlook 中的 HTML 电子邮件按钮对齐方式的相关文章

相当于Outlook中的浮动

我在尝试着float left一些表但是刚刚遇到一个大问题 outlook不支持float 好吧然后我尝试使用表格对齐等但没有运气桌子只是显示在彼此下方而不是彼此并排对此我们能做些什么吗 PS 它在其他设备上工作得很好它只是
Outlook Application_NewMailEx 在启动时不工作

我正在使用一个Application NewMailEx处理收到的所有电子邮件它适用于 Outlook 打开时收到的电子邮件然而在启动时 Application NewMailEx不会因收到的电子邮件而被呼叫我尝试使用Applicat
指示电子邮件的类型

我有以下自动化程序它将电子邮件发送给我自己并添加了特定的链接 import win32com client as win32 import easygui import tkinter as to from tkinter import
单击时显示 Foundation 5 工具提示

我在跨度上有一个通过基础 5 的工具提示如下所示 span class has tip tip top title My tool tip i class fi pricetag multiple size 21 i span 这很好用
ZURB Foundation，以编程方式切换选项卡

我使用 asp 与基础有没有办法使用 JS 或 ASP 在一个选项卡之间切换到另一个选项卡 Link http foundation zurb com docs tabs php 简单选项卡一个可能的解决方案是为选项卡链接分配一个 id
如何在 C# 中使用 Outlook MAPI 打开 .eml 文件？

我有一个 C 应用程序可以读取 msg 文件并提取正文和附件但是当我尝试加载 eml 文件时应用程序崩溃了我正在加载这样的文件 MailItem mailItem MailItem outlookApp CreateItemFrom
自动电子邮件生成无法解析多个收件人

我有一个 VBA 脚本可以创建并保存草稿电子邮件为了添加收件人它从链接的 Excel 表中提取一个字符串并将其添加到 Recipients 对象中对于只有单一收件人的电子邮件这就像一个魅力用户所需要做的就是打开草稿花 5 秒钟
如何添加从 Outlook 到 Web 表单的拖放上传功能？

我正在寻找一种方法允许用户以简单的方式将 Outlook 电子邮件上传到基于 Web 的系统我可以让它以手动方式为用户工作他们可以将电子邮件从 Outlook 拖放到桌面上这会创建一个 msg 文件这非常有效尤其是电子邮件中是
将 PDFMaker 与 MS Outlook 结合使用

我想将 Adob e PDFMaker 插件与 MS Outlook 2013 一起使用使用 PDFMAKER 将多封电子邮件保存为 pdf https stackoverflow com questions 44723984 savin
Zurb 基金会粘性页脚

我想使用 Foundation 4 拥有粘性页脚并且我想使用 HTML5
使用 Outlook 2016 通过 Python 发送电子邮件而无需打开它

import win32com client as win32 outlook win32 Dispatch outlook application mail outlook CreateItem 0 mail To To address
如何从 Outlook 的“收件人”字段中提取电子邮件地址？

我在某种程度上一直在使用 VBA 使用以下代码 Sub ExtractEmail Dim OlApp As Outlook Application Dim Mailobject As Object Dim Email As String D
Outlook Rest 调用表单 angularjs

使用 Outlook 我正在尝试创建事件当我使用 POSTMAN 发送请求时它工作正常但 Angularjs 中的相同代码却不起作用代码有什么问题请帮忙 scope createEvents function var url ht
电子邮件文件使用php邮件功能发送电子邮件两次

我的三个问题尝试了不同的组合但没有结果用谷歌搜索但几乎没有帮助我收到了两次电子邮件更改 email protected cdn cgi l email protection到电子邮件 ID 以查看结果在执行此文件时我正在获取
如何查找 Outlook .pst 文件的完整路径？

有没有办法通过 API 调用或注册表项以编程方式查找当前用户的 Outlook pst 文件的位置 With 展望赎回 http www dimastr com redemption 您可以使用 VBA 迭代消息存储RDOStores集合
Opera Mobile 不允许 jQuery 点击

我一直在测试基础 CSS 框架并且非常喜欢该框架提供的自定义表单元素我建了一个页面 http eventgrapple com home 测试框架它运行良好谷歌浏览器 http en wikipedia org wiki Google
如何在 HTML 邮件程序中导入自定义字体 (HTML 电子邮件)

我正在使用 HTML 邮件程序 HTML 电子邮件我收到的设计包含自定义字体如何在 HTML 电子邮件中使用自定义字体提前致谢首先也是最重要的这些电子邮件客户端目前支持网络字体 AOL Mail 本机 Android 邮件应用程序
为什么 Microsoft Outlook 在发送 HTML 电子邮件时不遵循列表样式？

我有以下代码但我一生都无法让它在 Microsoft Outlook 中工作 ul style margin left 50px line height 50px list style none li style font size 6
标志状态的 VBA 替换

根据文档 Outlook 中的 MailItem FlagStatus 属性是已弃用 https msdn microsoft com en us library microsoft office interop outlook maili
从 VSTO Addin 获取 Outlook 窗口

我有一个Outlook 2013 VSTO 插件我想将我的保存文件对话框我创造的为此您需要将其传递给Window父对象我不确定是否IWin32Window and Window是一样的但这就是我所拥有的 public IWin32

随机推荐

NodeJS：如何获取服务器的端口？

您经常会看到 Node 的示例 hello world 代码它创建一个 Http Server 开始侦听端口然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要
将文本从文本文件添加到 PDF 文件[重复]

这个问题在这里已经有答案了这是我的代码 using FileStream msReport new FileStream pdfPath FileMode Create step 1 using Document pdfDoc new D
使用剪贴板 SetText 换行

如何使用 SetText 方法添加换行符 I tried Clipboard SetText eee n xxxx 但当我将剪贴板数据粘贴到记事本中时它没有给我预期的结果预期结果 eee xxxx 我怎样才能做到这一点 Windows
如何使用NetLogo发送参数？

我对 NetLogo 还很陌生这就是我被困在这里几周的原因我想做的是让特工分成 2 队 4 人一组我的计划是让一个函数保存 4 个海龟 ID to assign groupmates a1 a2 a3 a4 并将他们分配到团队 1 a
Libgdx 和 Google 应用内购买结果

我遵循了这些指示 https github com libgdx libgdx wiki Interfacing with platform specific code使用 ActionResolver 接口集成 Libgdx 和原生 An
添加两个 ActiveRecord::Relation 对象[重复]

这个问题在这里已经有答案了如何将两个关系添加在一起当我尝试运算符时它返回一个数组但我需要它来返回关系谢谢麦克风 Try new relation relation merge another relation
如何从函数返回矩阵（二维数组）？（C）

我创建了一个生成宾果板的函数我想返回宾果板正如我没想到的那样它不起作用这是函数 int generateBoard int board N M i j fillNum Boolean exists True initilize se
Tensorflow Eager Execution 不适用于学习率衰减

在这里尝试让一个热切的执行模型与 LR 衰减一起工作但没有成功这似乎是一个错误因为学习率衰减张量似乎没有更新如果我遗漏了什么你可以帮我一下吗谢谢下面的代码正在学习一些词嵌入但是那学习率衰减部分根本不起作用 class Wo
如何确定给定方法可以抛出哪些异常？

我的问题和这个真的一样找出 C 中方法可能抛出的异常 https stackoverflow com questions 264747 finding out what exceptions a method might throw in
如何过滤 Solr 中多值字段返回的值

我有一个文档其中包含一个名为 uuid 的字段该字段是一个列表多值每个文档最多可以有 100k 个值例如我想搜索与以 5ff6115e 开头的 uuid 匹配的文档我已经可以通过使用成功做到这一点q uuids 5ff6115
使用 JQuery 预填充选择字段的下拉选项验证

我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value
搜索引擎如何找到相关内容？ [关闭]

Closed 这个问题正在寻求书籍工具软件库等的推荐不满足堆栈溢出指南 help closed questions 目前不接受答案 Google 在解析网络时如何找到相关内容例如 Google 使用 PHP 原生 DOM 库来解析内
如何从 TraCIDem11p.cc 获取 RSU 坐标？

我想知道如何开始编写一个能够在车辆靠近 RSU 时发送消息的程序首先我仍然对一些定义感到困惑但是一点一点地我想我会学习静脉 module simulation getModuleByPath rsu 0 c MobilityAcc
必须包含 log4J，但它会导致 Apache Spark shell 中出现错误。如何避免错误？

由于我必须将 jar 包含到 Spark 代码中因此我想请求帮助找出解决此问题而不删除 log4j 导入的方法简单代码如下 cp symjar log4j 1 2 17 jar import org apache spark rdd v
如何检查 C# 中是否存在具有特定签名的方法？

我想检查某些参数的方法是否已实现在这种情况下我有以下方法重载 public class Transformations public string TransformFrom string s return s public strin
如何使用 select 将数据从服务器发送到客户端

我在一些教程的帮助下想出了一个代码用于使用选择功能与客户端连接并接受来自客户端的消息现在我想做的是在服务器需要时将数据发送到特定的客户端如何做到这一点提前致谢服务器代码 include
是否有针对 CSS 位置和可点击区域的 Android 浏览器错误的解决方法？

当您有一些可点击的内容时例如 a a
clang内存消毒剂；如何让它打印源代码行号

我正在编译我的程序clang fsanitize memory fsanitize memory track origins fno omit frame pointer g O0当我运行它时输出是 matiu matiu laptop
为什么 `input type="date"` 的行为发生了变化？

日期输入例如
Outlook 中的 HTML 电子邮件按钮对齐方式

我在为客户构建的 HTML 电子邮件中调整号召性用语按钮时遇到一些问题按钮显示在左侧且未正确填充这是它们在我的浏览器和大多数电子邮件客户端中的显示方式它们在 Outlook 2016 中的显示方式如下这是我的 Inky 标记

Outlook 中的 HTML 电子邮件按钮对齐方式

Outlook 中的 HTML 电子邮件按钮对齐方式 的相关文章

随机推荐

热门标签

Outlook 中的 HTML 电子邮件按钮对齐方式的相关文章