4

我正在创建一个脚本，并希望使精选列表出现在列表旁边带有一个星号，就像这里，cardealerscript.com/demo/

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

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

任何人都可以建议另一种方法来保持 html 中的星星吗？我现在正在使用这个★。

谢谢安东

4

4 回答 4

6

★ ★

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

或者，您可以对任何您想要的开始进行base64编码并在css中使用它。

于 2013-03-06T21:45:26.830 回答
4

我喜欢这些东西的字体真棒：

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

于 2013-03-06T21:46:00.313 回答
3

您可以在完全不需要字符实体的情况下在纯 CSS 中实现它。查看带有6和5 尖星（及以上）的ShapesOfCSS 。但是，仍然需要检查浏览器兼容性。

对于一个不太出众但得到很好支持的明星，您可以使用菱形，它是一个 html 实体♦♦ （或♦）。(列表)

我将尝试回答浏览器兼容性问题。5-point start 使用了一些广泛支持的属性：margin、position、display、color、width、height、border和 top/left/right 都是 css 2.0 属性并且没有太大变化（如果有的话？） css 3. css 2.1 在1998 年达到了“推荐”状态，因此这些属性都应该在为仍在运行的任何手机发布的移动浏览器中得到统一支持。最初的 iPhone 于 2007 年发布，带有Safari 3的移动版本。Android上的浏览​​器支持要粗略得多，因为制造商和最终用户对于使用哪种浏览器有许多不同的选择。

只剩下以下属性：

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

-moz-transform指 Mozilla，即Gecko 布局引擎。支持-moz-transform从 13.5 开始，带有-moz前缀，从 16.0 开始支持标准 CSS3 属性transform。

现在，Safari 使用 webkit 渲染引擎，它与 Chrome 和许多其他浏览器共享。支持-webkit-transform：

可用性 -webkit-transform 属性可用于：

对于 2D 变换：

  • Safari 3.1 及更高版本
  • iOS 2.0 及更高版本
  • 谷歌浏览器 1.0 及更高版本

-ms-transform在 IE9.0 及更高版本中受支持。它在 IE10 中被弃用，它支持 CSS3 标准transform属性。（来源。）我不知道这如何转化为 Windows 移动支持。但请放心，Windows 仍然在移动领域占据个位数的市场份额。

-o-transform指的是Opera，实际上已经过渡到webkit渲染引擎。但是该属性是在'Presto 2.4'中添加的，该版本与Opera 10一起发布，适用于桌面版和移动版，似乎已于 2009 年12 月 10 日发布。

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

transform:      rotate(35deg);

按照star-five规矩，

transform:      rotate(-35deg);

遵守star-five:before规则，并且

transform:      rotate(-70deg);

对star-five:after规则。

于 2013-03-06T21:47:38.900 回答
3

对 BLACK STAR 的字体支持是有限的，所以这种情况更多地取决于系统中安装的字体，而不是浏览器。为了克服这个限制，您可以使用合适的字体（至少对于星号）作为可下载字体，通过@font-face. 有几种包含 BLACK STAR 的免费字体，例如 DejaVu 字体、Linux Libertine 和 Symbola。有关使用特殊字符的一般说明，请参阅我在 HTML 中使用特殊字符的指南。

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

于 2013-03-06T22:06:13.127 回答