font-size different in -webkit and -moz browsers

荒凉一梦 提交于 2019-12-14 00:16:40

问题


Check this jsfiddle

Why is there a difference in size of the datepicker when font-size is set to 1.5em? The amount of em's is not important I have tryd different font-sizes and I still get the same problem. The red box is set to 460px and is there for you to see the difference in size of the datepicker in firefox and chrome/safari.

Edit: I have already try'd using px insted of em


回答1:


Firefox uses DirectWrite to render text, and Chrome doesn't.

That is the reason for the ever so slightly different size of the rendered text.

There is no way to make the text pixel-perfect the same size between the two browsers.

Read this: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

And this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/




回答2:


Because 1.5em isn't a precise size and depends on what the browser decides the relevant font metrics to use are.

If you want a precise size, use either px or points.



来源:https://stackoverflow.com/questions/7360665/font-size-different-in-webkit-and-moz-browsers

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!