1

簡単な例を作って、弦の高さを取得してみました。

jQuery(function () {
    var jqSpan = $('span');
    jqSpan.css({
        'font-family': 'Arial',
        'font-size': '24px',
        'font-weight': 'bold'
    });
    $('#result').text(jqSpan[0].offsetHeight);
});

http://jsfiddle.net/DCBP9/1/

ブラウザによって値が異なることがわかりました。reset.cssを使用しましたが、値はまだ同じではありません。

例:(Mac）
私の例では、Chromeは27、Firefoxは28、Operaは25、Safariは27です。

各ブラウザには独自のレンダリングエンジンがあることは知っていますが、それらを同一にすることが可能かどうかを知りたいです。

4

2 に答える 2

2

'line-height'プロパティを追加する必要があります。ただし、ブロックアイテムに設定する必要があります。その場合、常に同じ高さになります。

ここの例を参照してください：http：//jsfiddle.net/dDat4/2/

jQuery(function () {
var jqSpan = $('p');
jqSpan.css({
    'font-family': 'Arial',
    'font-size': '24px',
    'font-weight': 'bold',
    'line-height': '28px'
});
$('#result').text(jqSpan[0].offsetHeight);

}）;

于 2013-02-19T10:14:16.963 に答える
1

すべてのブラウザーで同じ高さを実現するには、次の 2 つのことを考慮する必要があります。

  1. 「Consolas」などの等幅フォントを使用します。
  2. 固定サイズのフォント単位: ポイントを使用します。

コードは次のようになります。

jqSpan.css({
    'font-family': 'Consolas',
    'font-size': '20pt',
    'font-weight': 'bold'
});

フィドルを更新しました。

Chrome と Firefox の両方で 32 を表示しています。

于 2013-02-19T10:06:00.467 に答える