html - 样式表元素

Question

我正在使用 meter 元素来显示 0 - 5 的星级评分。我让它在 Chrome 上运行良好，在 Firefox 上还可以，但在 Safari 上无法正常运行。

Here is a codepen

对于 Safari，要正确显示样式表，我必须添加

 meter {
   -webkit-appearance: none;
}

然后一切正常。然而，一旦这样做，它就会停止在 Chrome 中工作，因为 Chrome 只会呈现仪表内的内容并停止完全显示它。有没有人解决这个问题？

附言另外，有谁知道为什么我不能这样设置:

&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-moz-meter-bar {
    //code here
  }

而是必须将其分解？

&::-webkit-meter-bar,
&::-webkit-meter-optimum-value {
   //code here
}

&::-moz-meter-bar {
   // code here
} 

如果有人有任何见解，将不胜感激:)

Answer 1

我无法在 Safari 上测试

但我会尝试以下方法(至少在 Chrome 中有效)

meter {
    -webkit-appearance: none;
    -webkit-appearance: meter;
}

Chrome 内置了 meter 样式。

这就是为什么当您设置 none 时它会停止工作的原因。希望 Safari 能理解none，不会理解meter，并保持第一种风格。