Gwt application font incompatibility issues in FireFox compare to IE

I am using Gwt 2.2.0 and Gxt 2.2.3, when i am running the application in Fire-Fox the font styles are bit different compare to IE7. If i am not wrong have seen the same incompatibility issues in the Gxt Gwt Demo site also. Is it a Gxt issue or is there any possibility that we can overcome this issue. Please find below for the screen shots. Here we can easily observe the differences in font. The label which is displayed on top of the 'Headings' panel is rendered differently in different browsers.I have applied the following style to this label:

font-family: Verdana, Sans-serif;
font-size: .8em;
color: #000000;
font-weight: bold;

When i debug and check the styles in IE and FF both are same. But they are rendering differently.

In IE:

In FireFox:


If i am not wrong have seen the same incompatibility issues in the Gxt Gwt Demo site also.

I have no IE7, but I see no differences between FF and IE8 set in IE7 compatibility mode.

In regard to your issue, usually this can be explained by different default font sizes and styles set for the <body> or for the parent element (or parent-parent-... element) in the browsers.

In simple words, .8em - equals to "default font size" multiply 0.8.

Try to reset the default font size and style explicitly for <body> , or <table> , or whatever you use as a basic container.

Quick googling gives an explanation: http://www.guistuff.com/css/css_units.html

Ems are a relative measurement unit. One 'Em'(1em) is equal to the height of the capital letter "M" in the default font size. When applied in CSS, the Em represents either the user's default font size, or the size of the parent element's font size, if one is available. When using Ems for sizing fonts, the fonts will resize according to the browser's default font size setting.

链接地址: http://www.djcxy.com/p/64404.html

上一篇: GXT NumberField / TextField右对齐

下一篇: FireFox中的Gwt应用程序字体不兼容问题与IE相比较