【发布时间】：2018-07-26 00:52:28
【问题描述】：
我设计了一个电子邮件模板来将电子邮件发送给客户电子邮件发送给客户并且用户界面在 Gmail 上看起来不错，但是当我向 Office 365 电子邮件用户发送相同的电子邮件模板时。 UI 显示不正确。
<div class="flex-center" style="float: left; width: 100%; align-items: center; background:#eee;">
<div class="content" id="content-upper-data" style="width: 90%;background: white; margin: 0 auto;">
<div class="inner-div" style="background:white; display: inline-block; width: 100%;" id="body-back-ground">
<div class="header-block" id="header-back-ground" style="background:green; color:white; float: left; width: 100%;" contenteditable="false">
<div class="header-left-content" style="float: left; width: 100%;">
<div class="center-alignment" style="text-align: center; width: 100%;">
<span class="header-top-heading" style="font-size: 24px; line-height: 22px;float: left;width: 100%; font-weight: 400; padding-top: 15px; padding-bottom: 15px;">
<span id="businessName">Email Process</span>
</span>
</div>
</div>
</div>
<div class="body-content" id="body-font-color" style="color:black; width: 100%; text-align: center; padding: 5%; float: left; line-height: 22px;">
<div class="paragraph-text" style="float: left; width: 90%;font-size: 16px;">
<div class="step1-step2-circle" style="display:flex; position: relative; height: 70px; display: -ms-flexbox; display: -webkit-flex;">
<div class="step1-outer" id="step1-outer-id" style="width: 70px; height: 70px; float: left; display: flex; border-radius: 50%; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; margin: auto 0px; z-index: 9; background:green;">
<div class="step1" id="step1-id" style="background:green; width: 43px; height: 45px; float: left; border-radius: 50%; z-index: 999; border: 1px solid white; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto;">
<span class="digit grey-color" style=" color: #fff; font-size: 28px; display:flex; align-items:center; justify-content:center; margin: 30%; font-weight: 800; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center;">
1
</span>
</div>
</div>
<div class="pipe" style="width: calc(100% - 140px); height: 5px; background: #818a91; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;"></div>
<div class="step2-outer" style=" width: 70px; height: 70px; display: flex; background: #818a91; float: right; border-radius: 50%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto;">
<div class="step2" style=" float: left; width:45px; height:45px; background: #818a91; border-radius:50%; z-index:999; border: 1px solid white; position: absolute; top:0px; right: 0px; bottom: 0px ;left: 0px ;margin: auto">
<span class="digit grey-color" style=" color: #fff; font-size: 28px; display:flex; align-items:center; justify-content:center; margin: 30%; font-weight: 800; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center;">
2
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我尝试检查 UI 问题，发现我的 calc() 函数不起作用。
注意：当我在服务器端设计电子邮件模板时，我只能使用内联 CSS。
【问题讨论】：
-
哈哈哈，您可能想阅读有关电子邮件模板的信息 - 它们的用途非常有限 - 我怀疑 calc 是否适用于 Microsoft 电子邮件客户端
-
回到旧的表格布局
-
@TemaniAfif 实际上，我当前的代码适用于移动设备和桌面电子邮件。而且我不确定表格布局是否会提供响应。
-
Mailchimp 做一个很好的指南 - templates.mailchimp.com 和 templates.mailchimp.com/resources/email-client-css-support
-
@Pete 谢谢。我只有 Office 365 的问题，所以需要修复它。
标签： html css stylesheet email-templates