Firefoxでは正常に見えるcss/lessリボンがありますが、Chromeでは壊れます(サイズ変更時に)。
100%ズームで表示すると見栄えは良くなりますが、内側または外側に移動すると、要素の位置がずれます。下のいじくり回しに入れて、色の変数を少なくして、遊びやすくしました。
注:Tinkerbinでこのコードを使用する場合は、CSS構文をLESSに設定し、RUNを押す必要があります。そうしないと、リボンがまったく読み込まれません:)
Firefoxでは正常に見えるcss/lessリボンがありますが、Chromeでは壊れます(サイズ変更時に)。
100%ズームで表示すると見栄えは良くなりますが、内側または外側に移動すると、要素の位置がずれます。下のいじくり回しに入れて、色の変数を少なくして、遊びやすくしました。
注:Tinkerbinでこのコードを使用する場合は、CSS構文をLESSに設定し、RUNを押す必要があります。そうしないと、リボンがまったく読み込まれません:)
これは未解決のバグのようです(2013年1月13日現在)。これは、問題となっている境界線のサイズに絞り込んだ別のスタックオーバーフローの質問でした。em
その人は結局webkitでバグレポートを提出することになりました。おそらく、そのバグレポートに確認としてあなたの経験を追加する必要があります。
それは(少なくともChrome、おそらくSafariも)em
ユニットスケーリングの問題であることが確認されているようです。webkit
コードを完全にpx
測定値に切り替えると(サイズに基づいてサイズを事前に計算します)、ここに表示されているように、Chromeで美しくスケーリングfont-size: 16px !important
するリボンが正しく機能します。