html 音频标签在 Chrome 中不显示，但在控制台的元素中可见并且在 Firefox 中工作，为什么？

Question

我有这个反应组件：

import translate from "@kpt/ui/providers/i18n/translateService";
import { Box, Typography } from "@mui/material";
import { IContentProps } from "applications/Training/Domain/ContentsInterface";

interface IAudioPlayerProps {
  content: IContentProps;
}

const AudioPlayer = ({ content }: IAudioPlayerProps) => {
  return (
    <Box height="100%" display="flex" justifyContent="center" alignItems="center">
      <audio id="audio" controls>
        <source src={content?.src} type={content?.mimeType} />
        <Typography>{translate("app.users.formations.browserAudioPlayerError")}</Typography>
      </audio>
    </Box>
  );
};

export default AudioPlayer;

它在 Firefox 中工作正常，但在 Chrome 中不显示。
音频播放器未显示，但在检查元素部分中的控制台时，我可以看到它。
就好像它是可见性隐藏的，但我检查了 css 并没有隐藏任何内容。
我尝试添加 z 索引但没有成功。
我不明白为什么音频播放器在 chrome 中不显示，但在 Firefox 中没有问题。
我看到一些旧帖子，人们对角度有同样的问题，但没有看到适合我的情况的解决方案。
有人遇到过类似的 React 问题并找到解决方案吗？

Answer 1

其实我发现了问题。
我必须添加宽度和高度，以便它在 Chrome 中显示。
Firefox 中不需要显示它的高度和宽度。