CSS calc（）在Office 365上不起作用

Question

我设计了一个电子邮件模板，用于将电子邮件发送给客户电子邮件发送给客户，并且Gmail上的UI看起来不错，但是当我向Office 365电子邮件用户发送相同的电子邮件模板时。 用户界面显示不正确。

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

Answer 1

使用简单的表格结构

这是三行表的表结构。 我们将继续以此为例：

<table>

    <tr>

           <td>Header</td>

    </tr>

    <tr>

           <td>Content</td>

    </tr>

    <tr>

           <td>Footer</td>

    </tr>

将内容对齐并设置样式为：

<table>

    <tr>

           <td align="center" style="background-color:#000;color:#fff;"><img src="logo.jpg"></td>

    </tr>

    <tr>

           <td>Content</td>

    </tr>

    <tr>

           <td align="center">123 Main St. Nashville, TN 37212</td>

    </tr>