Microsoft Outlook 电子邮件边框覆盖 CSS答案

【问题标题】：Microsoft Outlook Email border overwriting CSSMicrosoft Outlook 电子邮件边框覆盖 CSS
【发布时间】：2019-08-02 15:31:52
【问题描述】：

我有个简单的问题 - 我正在使用 MJML 构建一个电子邮件模板，但出于某种奇怪的原因，Outlook 不断覆盖模板上的边框，我不知道为什么。

MJML：

暂时忽略内联样式 - 我稍后会清理模板。

<!-- Start Tenth Section: Groovy -->
<mj-section padding-top="0px" padding-bottom="0px" border-left="1px solid grey" border-right="1px solid grey">
  <mj-column background-color="#FFFFFE" border-bottom="1px solid lightgrey">
    <mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="https://i.imgur.com/b2Lwa6F.png" href="https://www.arturia.com/products/ipad-synths/ispark/overview" alt=""></mj-image>
    <mj-text mj-class="content_section_left content_section_right" >
      <div class="article" mc:repeatable>
        <p mc:edit="article_content">Content</p>
      </div>
    </mj-text>
  </mj-column>
</mj-section>
<!-- End Tenth Section -->

截图：

展望：

我正在做的任何特定事情导致 Outlook 将边框呈现为黑色？我似乎无法在网上找到任何可以帮助我的东西

【问题讨论】：

您是否尝试过在样式标签中赋予border-right: 1px solid #eee？使用十六进制代码而不是使用名称。看看它是否有效。
@nazifarashid，效果很好！
很高兴听到这个消息！

标签： html css email outlook mjml

【解决方案1】：

有时在电子邮件模板上我们会遇到不同的问题。有时它可能无法获取样式，或者您可能会遇到渲染问题。如果 td 或 table 上的样式不起作用，则将您的样式放在样式标记中，其中之一肯定会起作用。有时它可以采取不同的行动。样式中的 Css 不起作用，但给它 or table 或 td 工作。检查最适合您的方法...如果不是，则 !important 可用于强制在 Outlook 客户端上显示该样式。

【讨论】：