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 ポイントの開始は、広くサポートされているいくつかのプロパティを使用します: 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は、 Gecko レイアウト エンジンを意味する Mozilla を指します。プレフィックス-moz-transform付きの 13.5 での開始のサポートと、標準の CSS3 プロパティの 16.0 のサポート。-moztransform

現在、Safari は Webkit レンダリング エンジンを使用しており、Chrome や他の多くのブラウザーと共有しています。のサポート-webkit-transform:

可用性 -webkit-transform プロパティは次で使用できます。

2D 変換の場合:

  • サファリ 3.1 以降
  • iOS2.0以降
  • Google Chrome 1.0 以降

-ms-transformIE9.0 以降でサポートされています。IE10 では廃止され、transform代わりに CSS3 標準プロパティが優先されます。( Source .) それが Windows モバイル サポートにどのように変換されるかはわかりません。しかし、Windows は依然としてモバイル分野で 1 桁の市場シェアを獲得しているので安心してください。

-o-transformは、実際に webkit レンダリング エンジンに移行した Opera を指します。しかし、そのプロパティは、2009 年 12 月 10 日にリリースされたように見える、デスクトップとモバイルの両方のOpera 10でリリースされた「Presto 2.4」で追加されました。

ああ、CSS スターを使用することに決めた場合は、transformそれを必要とするルールに CSS3 プロパティを追加する必要があります。つまり追加

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。DejaVu フォント、Linux Libertine、および Symbola など、BLACK STAR を含むいくつかのフリー フォントがあります。特殊文字の使用に関する一般的な注意事項については、HTML で特殊文字を使用するためのガイドを参照してください。

もちろん、他のアプローチもあります。alt代替ソリューションの中で最も簡単で、おそらく最良の方法は、適切な属性を持つ画像のみ、または画像の小さなセット (さまざまな数の星を含む) を使用することです。

于 2013-03-06T22:06:13.127 に答える