1

我正在尝试这个解决方案以获得星级。

有人可以解释一下为什么chrome中的星星比firefox中的大得多吗？（我知道 webkit 和 gecko 有时会做不同的事情，但差别很大吗？）

有人对如何解决这个问题提出建议吗？

更新：这是我的 Mac 上的差异有多大： 在此处输入图像描述

4

4 回答 4

2

您在不同的浏览器中看到不同字体的字符。一个字符的大小很可能取决于字体（即使字体大小相同）。

该技术使用字符“★” U+2605 BLACK STAR 和“☆” U+2606 WHITE STAR，它们仅出现在少数几种字体中。如果font-family相关元素的属性未提及包含这些字符的任何字体，则浏览器将（或至少应该）使用一些备用字体，并且不同的浏览器使用不同的备用字体列表。

通过在列表中列出合适的字体，您可以使同一系统中的不同浏览器更有可能（尽管不确定）对字符使用相同的字体font-family。即使这样，结果也会因系统而异，具体取决于安装的字体集。在某些系统中，渲染甚至可能失败，因为没有字体包含这些字符。

这个问题可以使用可下载的字体来解决，但这在这里可能有点过分了。

实际的解决方法是仅使用图像，以及一系列元素，例如<img src=star.png alt=star>和<img src=whitestar.png alt="">或（为了更好的可访问性）包含特定数量星的预制图像，例如<img src=stars4.png alt="four stars out of five">.

于 2013-08-05T13:07:00.237 回答
2

我遇到了同样的问题，发现使用 U+2B51 和 U+2B52（“BLACK SMALL STAR”和“BLACK WHITE STAR”）在 Chrome 和 Firefox 之间显示一致。（但尚未在其他浏览器和浏览器版本上进行彻底测试。）

于 2014-06-25T22:19:57.867 回答
0

可能对您来说很奇怪..但是我在浏览器中没有发现任何区别。

找到附加的图像。在此处输入图像描述

于 2013-08-05T12:51:26.703 回答
0

不同浏览器中的字符可能会有所不同。使用图像作为明星。不是字符。http://i.imgur.com/I2x2Yld.png使用 {content:''; 背景：url（....）不重复；}

于 2013-08-05T12:53:29.993 回答