GWT默认样式IE字体大小

Question

我正在使用标准的GWT（2.0.1）来制作一个互联网应用程序，我有这个奇怪的问题与巨大的字体（编辑：好，比正常大）与IE 7＆amp;中的默认样式。 8，FF，Chrome和Safari正确显示字体。起初我认为它一定是我的错误（我使用UiBinder与一些自定义的CSS）但后来我注意到在GWT展示网站上各种小部件字体也太大了。有什么想法吗？

Answer 1

这是由于IE默认字体大小渲染而与GWT无关，而是与CSS样式无关。

您可以使用类似的CSS（例如）确保字体在多个浏览器上保持一致：

*
{
    font-family: Arial, sans-serif;
    font-size: 12pt;    
}

body, table td, a, div, .p, pre 
{
    font-family: Arial, sans-serif;
    font-size: 12pt;
}

修改

为了确保所有小部件“获得”这种新样式，您需要以下列方式将CSS文件放在* .gwt.xml文件中（行的顺序很重要）：

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="MyNewAndImprovedStyle.css" />

不要把它放在HTML页面中！

这将确保您的样式覆盖窗口小部件样式。

PS：您可以手动覆盖一些小部件样式（为此我有一个GwtOverride.css）...请参阅代码段：

.gwt-TextBox,.gwt-PasswordTextBox,.gwt-DateBox
{
    border: 1px solid #BDBDBD;
    padding: 2px;
    background-color: #FFFCDA;
}


.gwt-ListBox 
{
    font-family: Arial, sans-serif;
    font-size: 12px;    
    background-color: #FFFCDA;
}


/* make dialog slick and nice */
.gwt-DialogBox .dialogContent 
{
    margin: 5px;
}

.gwt-DialogBox .Caption 
{
    background: #99B4CC;
    border-top: 2px solid #99B4CC;
    border-bottom: 1px solid gray;

    font-size: 110%;
    font-weight: bold;
    white-space: nowrap;
}

Answer 2

Opera 10.10，IE 6和FF 3.6（所有在WinXP SP3上）的快速比较 - Opera和IE显示略大的字体。我不确定这是否是GWT的错 - 每个浏览器都有一些核心CSS规则定义默认外观，如果没有应用其他CSS样式（如FF中所有图像上的恼人的蓝色边框），所以只需确保明确设置字体大小等，以消除这些差异。

也就是说，除非你看到的字体大于应有的字体，否则它可能是一个错误。

更新：在Linux下（Gentoo amd64）它是相同的 - Opera重新搜索比Firefox更大的字体，但看起来并不奇怪。