子 div 背景颜色 HTML 雅虎电子邮件有问题

Question

我有一个动态 "progress bar" 组件，可以针对不同的百分比呈现不同的背景颜色和宽度

<div
  style={{
    backgroundColor: '#FFFFFF',
    height: '24px',
    borderRadius: '3px',
    border: '1px solid black'
  }}
>
  <div
    style={{
      width: `${percentage}%`,
      height: '100%',
      backgroundColor: '#15c621'
    }}
  />
</div>

此组件适用于除 Yahoo 邮件以外的所有电子邮件客户端。嵌套的 div 背景颜色和宽度都不会在电子邮件中呈现，父背景颜色会显示进度条的长度。我该如何解决这个问题，使子 div 背景以正确的宽度和颜色显示？

Answer 1

[已解决] - 在子 div 中添加非中断 space 将 div 的高度强制到父容器。最终代码是

    <div
      style={{
        backgroundColor: '#FFFFFF',
        height: '24px',
        borderRadius: '3px',
        border: '1px solid black'
      }}
    >
      <div
        style={{
          width: `${percentage}%`,
          height: '100%',
          backgroundColor: '#15c621'
        }}
      >
        &nbsp;
      </div>
   </div>