问HTML Meter元素星级在Chrome中不起作用
EN

Stack Overflow用户

提问于 2021-03-19 03:35:43

回答 1查看 24关注 0票数 0

我正在开发一个meter元素，它使用星号而不是线来显示值。除了Chrome和Edge之外，5星的评级在所有方面都很好用。由于某些原因，在Chrome和Edge中，每1/2值显示一颗星。因此，如果该值为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;
}

<meter class="ratingscore" value="4.6" min="0" max="5"></meter>

html

css

google-chrome

回答 1

Stack Overflow用户

发布于 2021-03-19 03:53:33

我想这是因为你没有为元素设置固定的大小，每个浏览器都可以用其他方式设置它们。尝试此解决方案，并让我知道它是否对您有帮助。将每个伪元素的维度设置为父元素。

.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;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66697959

复制

相似问题

问HTML Meter元素星级在Chrome中不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Meter元素星级在Chrome中不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Meter元素星级在Chrome中不起作用
EN