Html 是否有一个css属性可以替换；“显示”；在电子邮件中？

我一直在使用样式化组件从头开始创建一些电子邮件。然而，似乎并非所有电子邮件客户端都支持css“display”属性。它可以被什么替代，或者它的等价物是什么？下面是组件的代码及其样式

import React, { ComponentProps, FC } from 'react'
import { CFLogoMini } from './mini-cf-logo'
import styled from 'styled-components'

export const ActionButton: FC<ComponentProps<typeof _StyledButton>> = ({
  children,
  ...props
}) => (
  <_StyledButton {...props}>
    <table>
      <tbody>
        <tr>
          <td>{children}</td>
          <td>
            <CFLogoMini />
          </td>
        </tr>
      </tbody>
    </table>
  </_StyledButton>
)

const _StyledButton = styled.a`
  background-color: #13a0ef;
  padding: 1.5rem 2.25rem;
  font-size: 0.875rem;
  color: white;
  text-transform: uppercase;
  border: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  user-select: none;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02857em;

  td,
  td > img {
    vertical-align: middle;
  }

  &:hover {
    background-color: #1190d7;
  }
`

从'React'导入React，{ComponentProps，FC}
从“/mini cf logo”导入{cflogomi}
从“样式化组件”导入样式化
导出常量操作按钮：FC=({
儿童
…道具
}) => (
{儿童}
)
const_StyledButton=styled.a`
背景色：#13a0ef；
填充物：1.5雷姆2.25雷姆；
字体大小：0.875rem；
颜色：白色；
文本转换：大写；
边界：0；
保证金：0；
显示：内联flex；
对齐项目：居中；
用户选择：无；
垂直对齐：中间对齐；
-moz外观：无；
证明内容：中心；
文字装饰：无；
框大小：边框框；
过渡：背景色250ms立方贝塞尔（0.4,0.2,1）0ms，
边框250ms立方贝塞尔（0.4,0,0.2,1）0ms；
字体系列：“Roboto”，“Helvetica”，“Arial”，无衬线；
字号：500；
字母间距：0.02857em；
运输署，
td>img{
垂直对齐：中间对齐；
}
&：悬停{
背景色：#1190d7；
}
`

如果你想要一个看起来像你想要的电子邮件设计，就不要使用现代css。需要很多时间，但使用基本HTML和内联样式。基本上是嵌套表。您的显示内联flex永远不会像在浏览器中那样工作