8 
font-variant: small-caps;
font-size: 12px;

ファイアフォックス:

  • 大文字: 12px
  • 小文字: 10px

クロム：

  • 大文字: 12px
  • 小文字: 8px

JavaScriptを使わずにそれを調和させる方法は?

4

3 に答える 3

0

次のような css ハックを使用して、ブラウザーを個別にターゲットにすることができます。

@-moz-document url-prefix() {
  //firefox specific css here
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  //chrome specific css here - this will also hit other webkit browsers like safari tho
}

しかし、私の意見では、ブラウザーを検出して html 要素にクラスを設定する小さな JavaScript を使用すると、そのクラスをベースとして個々のブラウザーをターゲットにすることができます。

最終的には次のようになります。

<html class="firefox">
...
</html>

.firefox .rulename {
  //firefox specific css here
}

もちろん、クロムやその他のブラウザでも同じです

于 2011-09-28T20:44:51.553 に答える
0

iPad の Safari とデスクトップの Safari の間で同様の問題が発生しており、16 ピクセルのスモール キャップのスケールが異なります。何らかの理由で、iPad ではスモール キャップのサイズが大きくなり、Firefox のサイズと少し一致します。

フォント サイズを調整するか、文字間隔を 0.5 ピクセル程度小さくすると、ハッキングを追加しなくても問題を軽減できます。基本的に、あるブラウザーではトリガーされ、別のブラウザーではトリガーされない小さな中間調整を見つけて、可能な限り近づくようにします.

私が Firefox と IE で観察したことは、フォントは Webkit のサイズよりも多くの中間サイズにスケーリングされる傾向があるということです。たとえば、IE と Firefox では、15.6px は 15.5px よりも少し大きいか、より多くのトラッキングを使用して調整し、15.7px、15.8px なども同様です。ほぼ 0.1 ピクセルごとに違いがあります。一方、Safari では、違いは 0.4 ピクセルごとにしか認識されません。

オーバーフローの問題を引き起こしたここでのスモール キャップのケースでは、Safari (デスクトップ) の 16 ピクセルとほとんど変わらない 15.5 ピクセルを使用しましたが、IE と Firefox のスモール キャップのサイズを可能な限り Safari に近づけました。

于 2013-04-10T04:34:07.353 に答える