HTML Meter Element Star Rating 在 Chrome 中不起作用答案

【问题标题】：HTML Meter Element Star Rating Not Working in ChromeHTML Meter Element Star Rating 在 Chrome 中不起作用
【发布时间】：2021-03-18 19:35:43
【问题描述】：

我正在研究一个仪表元素，它使用星号而不是线来显示值。 5 星评级在除 Chrome 和 Edge 之外的所有设备上都运行良好。出于某种原因，在 Chrome 和 Edge 中，每 1/2 值显示 1 颗星。因此，如果值为 4.6，则显示 9.1 颗星。该问题不会出现在 Firefox、Safari（桌面或移动）、移动互联网浏览器或 Chrome 移动应用程序中。我一直在尝试解决这个问题，但没有运气。有谁知道可能导致此问题的原因或解决此问题的方法？

https://jsfiddle.net/mik3mitchell/jk7s9x85/9/

meter {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  background: transparent;
  border-radius: 0.5em;
}

.ratingscore {
  width: 10em;
  height: 2em;
  border: 0;
  border-radius: 0;
  font-size: 1.2em;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCBmb250LXNpemU9IjEwMCIgeT0iMC44ZW0iIG9wYWNpdHk9IjAuMyI+4piFPC90ZXh0Pjwvc3ZnPg==);
}

.ratingscore::-webkit-meter-optimum-value {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCBmb250LXNpemU9IjEwMCIgeT0iMC44ZW0iIGZpbGw9ImdvbGQiPuKYhTwvdGV4dD48L3N2Zz4=);
}

.ratingscore:-moz-meter-optimum::-moz-meter-bar {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCBmb250LXNpemU9IjEwMCIgeT0iMC44ZW0iIGZpbGw9ImdvbGQiPuKYhTwvdGV4dD48L3N2Zz4=);
}

.ratingscore::-webkit-meter-bar {
  background: 0;
  border: 0;
}

&lt;meter class="ratingscore" value="4.6" min="0" max="5"&gt;&lt;/meter&gt;

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

我认为这是因为您没有为元素设置固定大小，每个浏览器都可以通过其他方式设置它们。试试这个解决方案，如果它对你有帮助，请告诉我。为每个伪元素设置尺寸作为父元素。

.ratingscore {
  width: 10em;
  height: 2em;
  border: 0;
  border-radius: 0;
  font-size: 1.2em;
  background: ...;
}

.ratingscore::-webkit-meter-optimum-value {
  background: ...;
  width: 10em;
  height: 2em;
}

.ratingscore:-moz-meter-optimum::-moz-meter-bar {
  background: ...;
  width: 10em;
  height: 2em;
}

.ratingscore::-webkit-meter-bar {
  background: 0;
  border: 0;
  width: 10em;
  height: 2em;
}

【讨论】：