title: Jquery .width() results are different in Firefox and Chrome
body: <p>I am trying to measure the width of a string. To do this I create a div width the string as value, add it do the DOM and measure the width using Jquery's .width().</p>
  
  <p>The problem is that I get different results in when I execute the script in Firefox and Chrome.</p>
  
  <p>I created a jsFiddle: <a href="http://jsfiddle.net/7wjeB/2/" rel="nofollow">http://jsfiddle.net/7wjeB/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div&gt;
      &lt;input id="input" value="office worker" style="display:block; position:static; font-family: Arial, Helvetica, sans-serif; font-size: 25px;"&gt;&lt;/input&gt;
      &lt;button onclick="calc()" style="font:Arial; font-size:12px;"&gt;Calculate width&lt;/button&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>width = function(font, string) {
  
      var f = font || '12px arial', o = $('&lt;div&gt;' + string + '&lt;/div&gt;').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));
  };
  </code></pre>
  
  <p>I am using Firefox version 19.0.2 and Chrome version 26.0.1410.64</p>