子div背景颜色HTML Yahoo电子邮件的问题怎么处理?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (67)

我有一个动态的“进度条”组件,它为不同的百分比呈现不同的背景色和宽度。

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

此组件在除雅虎邮件之外的所有电子邮件客户端中都工作得很好。嵌套的div背景色和宽度不会在电子邮件中呈现,并且进度条的长度会显示父级背景色。如何解决这个问题,使子div背景以适当的宽度和颜色出现?

提问于
用户回答回答于

在子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>

扫码关注云+社区

领取腾讯云代金券