Question

我有一个动态的“进度条”组件，可以为不同的百分比呈现不同的背景颜色和宽度

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

此组件在Yahoo邮件以外的所有电子邮件客户端中都可以正常使用。嵌套的divs背景颜色或宽度均不会在电子邮件中呈现，并且进度条的长度将显示父级背景颜色。如何解决这个问题，使子div背景显示正确的宽度和颜色？

Answer 1

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

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

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

1 个答案: