Question

我正在尝试从::cue元素中的WebVTT向<video>添加一些基本样式。具体问题在于line-height，或者更确切地说是行距-似乎取决于<video>元素的大小而缩放。

仅::cue个伪元素allows a small subset of CSS properties，其中line-height是其中之一。我可以使用它来定义font-size和line-height，但是line-height似乎被忽略了。

这是一些基本的CSS：

video::cue {
  font-size: 14px !important;
  line-height: 20px !important; // or calc(1em + 6px)
  background-color: rgba(0,0,0,0.6) !important;
}

font-size和background-color样式似乎可以正常工作。尽管缩小视口后，font-size会开始缩小以适合<video>元素。

line-height基本上被忽略，根据视频元素的大小，多行是分开的。以下是一些截图，显示了各种尺寸的<video>元素。

我尝试在文档中使用CSS设置::cue的样式，并在::cue文件中使用.vtt的样式。

小尺寸的线开始重叠，大尺寸的线则间隔开。

是否有一种方法可以一致地设置::cue元素的样式，以便在<video>元素放大/缩小时行间距保持一致？这意味着行距将是恒定的X像素吗？

注意：我只需要在Chrome中使用它即可。