css 在 gmail 中没有完全显示

Question

我正在尝试使用 php 邮件功能向用户电子邮件发送验证电子邮件，电子邮件在 html 和 css 中。在邮件中，一切都显示，颜色，字体大小等，但 flex-direction 和其他 flex 命令不起作用，我什至检查了电子邮件，发现它甚至没有包含在代码中，而我在电子邮件中发送了它这是 html:

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Recover</title>
        <link rel="shortcut icon" type="image/x-icon" href="./img/logo.png" />
        <style>
          *{
            padding: 0;
            margin: 0;
            font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif
          }

    
          .recover a {
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-decoration: none;
            font-weight: 500;
            width: 50%;
            height: 20%;
            background: #00a761;
            color: white;
            font-size: 15px;
          }
    
          .recover a:hover {
            background: #00d67d;
          }
          .recover h1 {
            color: white;
            margin-bottom: 1%;
          }
          .recover p {
            color: #afafaf;
            width: 50%;
            text-align: center;
            margin-bottom: 1%;
          }
         .recoverall .recover{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            width: 80%;
            height: 250px;
            background: #292929;
        }
         .recoverall{
            display: flex;
            justify-content: space-around;
            background: #070707;
            width: 100%;
            height: 100vh;
            padding-top: 5%;
        }
          
          @media screen and (max-width: 768px) {
            .recover h1 {
              font-size: 15px;
            }
            .recoverall {
              width: 100%;
            }
            .recover p {
              font-size: 10px;
              width: 95%;
            }
            .recover a {
              width: 70%;
            }
          }
        </style>
      </head>
      <body>
        <div class="recoverall">
           <div class="recover">
            <h1>Recover Your Password</h1>
            <p>
              We Have Recive a request Fom this Account to reset Your password, if
              you have not sent this request ignore, but if You Are the One that
              sent it, Click the button Below
            </p>
            <a href='XXX'>Click Here To Continue</a>
          </div> 
        </div>
      </body>
    </html>

这是应该显示的内容：

但这是 gmail 显示的内容：

当我检查 gmail 并查看 css 时，看到的是：

没有 flex-direction 或其他我该怎么办？

Answer 1

我认为 Gmail 不支持 flex https://www.campaignmonitor.com/css/flexbox/flex/

Answer 2

那么将被推荐的是：我让您根据需要调整 table 元素。并且您可能需要删除 css

中的所有显示/对齐/flex-direction

<style>
          *{
            padding: 0;
            margin: 0;
            font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif
          }

    
          .recover a {
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-decoration: none;
            font-weight: 500;
            width: 50%;
            height: 20%;
            background: #00a761;
            color: white;
            font-size: 15px;
          }
    
          .recover a:hover {
            background: #00d67d;
          }
          .recover h1 {
            color: white;
            margin-bottom: 1%;
          }
          .recover p {
            color: #afafaf;
            width: 50%;
            text-align: center;
            margin-bottom: 1%;
          }
         .recoverall .recover{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            width: 80%;
            height: 250px;
            background: #292929;
        }
         .recoverall{
            display: flex;
            justify-content: space-around;
            background: #070707;
            width: 100%;
            height: 100vh;
            padding-top: 5%;
        }
          
          @media screen and (max-width: 768px) {
            .recover h1 {
              font-size: 15px;
            }
            .recoverall {
              width: 100%;
            }
            .recover p {
              font-size: 10px;
              width: 95%;
            }
            .recover a {
              width: 70%;
            }
          }
        </style>
      <body>
        <table  class="recoverall" border="1" cellpadding="0" cellspacing="0" width="100%">
 <tbody  class="recover"><tr>
  <td>
   <h1>Recover Your Password</h1>
  </td>
 </tr>
 <tr>
  <td>
   <p>
              We Have Recive a request Fom this Account to reset Your password, if
              you have not sent this request ignore, but if You Are the One that
              sent it, Click the button Below
            </p>
  </td>
 </tr>
 <tr>
  <td>
   <a href='XXX'>Click Here To Continue</a>
  </td>
 </tr>
</tbody></table>
      </body>

css 在 gmail 中没有完全显示

css not showing completely in gmail

html

css

gmail