日期:2014-05-16  浏览次数:20553 次

EXTJS字体显示偏小的解决方法

在做Extjs项目的时候,发现IE运行很正常,而在火狐下字体感觉偏小了一点。后来查找到原因,是因为在ext-all.css里面,根据浏览器的不同,有些定义字体大小为11px,有些又为12px。为了达到同一性,解决的方法很简单,在ext/resources/css/目录下建立一个ext- patch.css文件,内容如下:

------------------------------------------------------------

.x-window-footer {
??? position: relative;
??? top: 0;
??? right: 0;
}
.x-tab-strip SPAN.x-tab-strip-text {
??? font-size: 12px;
}
.x-panel-header {
??? font-size: 12px;
}
.x-tree-node {
??? font-size: 12px;
}
.x-grid3-hd-row TD {
??? font-size: 12px;
}
.x-toolbar .x-small-editor {
??? font-size: 12px;
}
.x-toolbar .ytb-text{
?font-size: 12px;
}
.x-grid3-row TD {
??? font-size: 12px;
??? LINE-HEIGHT: 16px;
}
.x-tip .x-tip-bd {
??? font-size: 12px;
}
.x-tip h3{
??? font-size: 12px;
}
.x-tip .x-tip-bd-inner{
??? font-size:12px;
}
.x-panel-tl .x-panel-header {
??? FONT: normal 12px tahoma,arial,verdana,sans-serif;
}
.x-form-field {
??? FONT: 12px tahoma,arial,helvetica,sans-serif?
}
.x-small-editor .x-form-field {
??? FONT: 12px tahoma,arial,helvetica,sans-serif?
}
.x-combo-list-item {
??? FONT: 12px tahoma,arial,helvetica,sans-serif;?
}?
.x-menu-list-item {
??? FONT: 12px tahoma,arial,sans-serif;
}
.x-window-tl .x-window-header {
??? FONT: bold 12px tahoma,arial,verdana,sans-serif;?
}
.x-layout-split-west .x-layout-mini {?
??? BACKGROUND-IMAGE: url(../images/mini-left.jpg);?
}
.ext-ie .x-form-text {
??? margin-top:1px;
}
.x-form-item {?
??? FONT: 12px tahoma,arial,helvetica,sans-serif
}
.x-grid-group-hd DIV {?
??? FONT: bold 12px tahoma,arial,helvetica,sans-serif;
}

..x-btn-text-icon .x-btn-center .x-btn-text {ext-all.css (line 227)
background-position:0pt 2px;
background-repeat:no-repeat;
padding:3px 0pt 2px 18px;
}
.ext-gecko .x-btn button {ext-all.css (line 222)
padding-left:0pt;
padding-right:0pt;
}
.x-btn button{
??? font-size:12px;
}

------------------------------------------------------------

然后在页面上引入ext-all.css的同时也引入ext-patch.css即可