Question

我正在创建一个脚本，并希望在列表旁边显示带有星标的精选列表，例如cardealerscript.com/demo /

虽然它适用于某些浏览器，但它在移动浏览器中不起作用。

我想将它保存在html中，但我不想使用图像。

有人可以提出另一种方法来保持html中的明星吗？我现在正在使用这个。

感谢Anton

Answer 1

★★

来自http://www.quackit.com/html/html_special_characters.cfm的黑星

或者你可以base64 encode任何你想要的开头，并在css中使用它。

Answer 2

我喜欢这个东西的字体很棒：

http://fortawesome.github.com/Font-Awesome/

Answer 3

您可以在纯CSS中实现它，而不需要任何字符实体。使用ShapesOfCSS和6星标（以及更高版本）查看5 pointed。但是，仍然需要检查浏览器兼容性。

对于一个不太明星但得到很好支持的人来说，你可以使用一个钻石，这是一个html实体&diams;♦（或♦）。（List）

我将采取措施来回答浏览器兼容性问题。 5点开始使用一些广泛支持的属性：margin，position，display，颜色，宽度，高度，border和上/左/右都是css 2.0属性并没有发生太大变化（如果有的话）？对于css 3. Css 2.1在 1998 中达到“推荐”状态，因此这些属性应该在为任何版本发布的移动浏览器中统一支持手机还在运行。最初的iPhone于2007年发布，移动版本为Safari 3。 Browser support on Android更加粗略，因为制造商和最终用户有许多不同的浏览器可供选择。

这只留下以下属性：

-moz-transform:    rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform:     rotate(35deg);
-o-transform:      rotate(35deg);

-moz-transform指的是Mozilla，意为Gecko layout engine。对-moz-transform的支持从13.5开始，-moz前缀，16.0开始标准CSS3属性transform。

现在，Safari使用webkit呈现引擎，它与Chrome和many other browsers共享。支持-webkit-transform：

<强>状况   -webkit-transform属性位于：

对于2D变换：


Safari 3.1及更高版本

iOS 2.0及更高版本

Google Chrome 1.0及更高版本

IE9.0及更高版本支持

-ms-transform。它在IE10中被弃用，它有利于CSS3标准transform属性。（Source。）我不知道如何转换为Windows移动支持。但是，在移动领域，Windows仍可以轻松获取市场份额的单个数字。

-o-transform指的是Opera，它实际上已转换为webkit呈现引擎。但该属性已添加到'Presto 2.4'中，该版本随Opera 10一起发布，适用于桌面版和移动版，似乎已在December 10, 2009上发布。

哦，如果你决定使用css star，你应该将CSS3 transform属性添加到任何需要它的规则中。即添加

transform:      rotate(35deg);

符合star-five规则，

transform:      rotate(-35deg);

符合star-five:before规则和

transform:      rotate(-70deg);

符合star-five:after规则。

Answer 4

Font support to BLACK STAR是有限的，因此情况取决于系统中安装的字体而不是浏览器。要克服此限制，您可以通过@font-face使用合适的字体（至少对于星形）作为可下载字体。有几种包含BLACK STAR的免费字体，例如DejaVu字体，Linux Libertine和Symbola。有关使用特殊字符的一般说明，请参阅我的Guide to using special characters in HTML。

当然，还有其他方法。最简单，也许是最好的替代解决方案是仅使用图像或一小组图像（包含不同数量的星星），并具有足够的alt属性。

用html制作一个明星

4 个答案: