chrome和firefox中的文本宽度不同

Question

提前致谢。

JS 小提琴链接：http://jsfiddle.net/XpPpR/46/

这是我的代码，

<script src="Hide_3d5b7aca/Hide/jquery-1.9.1.min.js"></script>
<div id="measureText"/>
   <script>
       $(function () {
           text = "1 000 000";
           font = {
               color: '#282828', fontFamily: 'Segoe UI', fontStyle: 'Normal', fontWeight: 'regular', opacity: 1, size: '13px'
           };
           var element = $(document).find("#measureTex");
            if (element.length == 0) {
               var textObj = document.createElement('text');
               $(textObj).attr({ 'id': 'measureTex' });
               document.body.appendChild(textObj);
           }

            textObj.innerHTML = text;

           if (font != null) {
               textObj.style.fontSize = (font.size > 0) ? (font.size + "px") : font.size ;
               textObj.style.fontFamily = font.fontFamily ;
           }

           alert(textObj.offsetWidth);

       });
  </script>

文本宽度在 chrome 和 firefox 中显示为 57，但在 IE 中返回为 56。 为什么？以及如何解决这个问题..

Answer 1

没有办法在不同的浏览器中获得相同的文本宽度。这是因为字体渲染系统非常不同，尤其是在 OS X 和 Windows 上。

更多信息：http://www.smashingmagazine.com/2012/04/a-closer-look-at-font-rendering/