文字列の幅を測定しようとしています。これを行うには、文字列を値として div 幅を作成し、それを追加して DOM を実行し、Jquery の .width() を使用して幅を測定します。
問題は、Firefox と Chrome でスクリプトを実行すると異なる結果が得られることです。
jsFiddle を作成しました: http://jsfiddle.net/7wjeB/2/
HTML:
<body>
<div>
<input id="input" value="office worker" style="display:block; position:static; font-family: Arial, Helvetica, sans-serif; font-size: 25px;"></input>
<button onclick="calc()" style="font:Arial; font-size:12px;">Calculate width</button>
</div>
</body>
JavaScript:
width = function(font, string) {
var f = font || '12px arial', o = $('<div>' + string + '</div>').css({
'position' : 'absolute',
'float' : 'left',
'white-space' : 'nowrap',
'visibility' : 'hidden',
'font' : f
}).appendTo($('body')), w = o.width();
o.remove();
return w;
};
calc = function() {
var content = $("#input").val();
var font = $("#input").css("font-size") + " " + $("#input").css("font-family");
alert(width(font, content));
};
Firefox バージョン 19.0.2 と Chrome バージョン 26.0.1410.64 を使用しています