`
ld_hust
  • 浏览: 171476 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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即可

分享到:
评论

相关推荐

    EXTJS 样式 修正 css 可以调整extjs里面的字体大小

    EXTJS 样式 extjs字体大小 可以轻松在这个CSS文件里面调整EXTJS插件的字体大小,对这个有需求的同志们有福了!

    ExtJS改变默认字体大小的几种方式

    以下是改变ExtJS默认字体大小的几种方法: 1. 修改样式文件:最直接的方法是编辑`ext-all.css`样式文件。将文件中所有涉及到字体大小为11px的部分替换为所需的值,如12px。如果要增大字体到15px,不仅需要替换...

    extjs 进度条的显示

    `Ext.MessageBox.show()`是ExtJS提供的一种显示对话框的方法,其中包括一个进度条选项,这使得它非常适合用来显示任务的进度。例如,在代码片段中,我们首先创建了一个带有进度条的对话框: ```javascript var ...

    包含各种类型的extjs小图标,Extjs4小图标

    ExtJS 4提供了响应式布局支持,确保图标在不同设备上都能正确显示。 7. **无障碍性**: - 符号图标应与文本标签一起使用,以确保屏幕阅读器和其他辅助技术能够理解它们的含义,提升应用的无障碍性。 8. **性能...

    extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

    Extjs 4.2分组小计

    默认情况下,ExtJS会自动在每个分组底部显示小计。如果你想要自定义小计的样式或行为,可以使用`summaryRenderer`函数。例如,你可以将小计格式化为货币值: ```javascript { text: '销售额', dataIndex: '...

    extjs日期显示(如何转换日期格式)

    extjs 中显示日期时间的方法是在后台传递来的数据是 Date 类型的数据,日期时间格式为 timestamp,是 13 位的 long data 数字类型的时间。在 extjs6 中,可以使用配置消息转换器对 responseBody 输出日期格式进行...

    myeclipse中使用extjs缓慢 卡死 白屏 解决方法总结

    ### MyEclipse中使用ExtJS出现缓慢、卡死、白屏问题及解决方法总结 在进行Web开发时,经常会遇到一些工具与框架不兼容或配置不当导致的问题,这些问题往往会影响到开发效率。本文将针对在MyEclipse环境中使用ExtJS...

    EXTJS4 Actioncolumn不能使用文字的部分解决办法

    就是extjs4里面,想给grid里面一格中,文字后面加个小图标。 因为俺们项目就只是文字+图标,所以俺就没有复写Actioncolumn,而是从Column下面继承了一下。。 包含自定义插件源码、效果图等等。

    extjs小图标大全小图标

    综上所述,"extjs小图标大全小图标"这个资源为ExtJS开发者提供了一站式的图标解决方案,使他们能够在项目中轻松集成和使用各种图标,提升应用的视觉效果和用户体验。通过合理使用和适配,这些图标可以成为构建高质量...

    extjs显示表格信息

    用extjs技术显示表格的信息,不过首先要导入extjs所需的库文件

    extjs icon小图标

    在你提到的"extjs icon小图标"资源中,包含了一万个小图标,这为开发者提供了大量的选择,以满足不同设计需求。这些图标可能涵盖了各种类别,如操作状态(如成功、警告、错误)、导航方向、编辑操作(如新建、删除、...

    extjs easyui小图标

    本篇文章将深入探讨“ExtJS EasyUI小图标”的相关知识点。 首先,让我们了解ExtJS。ExtJS是一个基于JavaScript的开源框架,由Sencha公司开发。它提供了大量的UI组件,如表格、树形视图、面板、表单等,以及强大的...

    extjs php 显示 登陆用户的js方法

    根据所提供的文件信息,“extjs php 显示 登陆用户的js方法”这一主题聚焦于如何在JavaScript(具体是ExtJS框架)中利用PHP后端数据来展示已登录用户的名称。下面将深入解析这个过程中的关键技术点。 ### 一、ExtJS...

    ExtJS4 上传文件类型和大小的判断方法(实例)

    对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法(实例) 》:http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。

    extjs常见问题及解决方法

    extjs常见问题http://www.jb51.net/list/list_217_1.htm

    extjs年份控件(只显示年,无月日时分秒)

    Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)

    extjs小图标(项目小图标大全)

    "extjs小图标(项目小图标大全)"这个资源集合了5000个专门用于ExtJS项目的图标,为开发者提供了广泛的选择,以满足不同设计需求。 这些小图标通常以SVG或PNG格式提供,因为这两种格式支持多种分辨率和设备,能够确保...

    ExtJs4做的小程序

    ExtJS4是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序。这个"ExtJs4做的小程序"是一个基于ExtJS4...通过学习和分析这个项目,开发者可以深入理解ExtJS4的使用方法,并提升在企业级应用开发中的技能。

    SSH+ExtJs分页小例子

    在这个"SSH+ExtJs分页小例子"中,我们将探讨如何将这两种技术结合实现数据分页显示。 首先,我们来看NewsDAO.java文件。这个文件包含了两个关键方法:`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...

Global site tag (gtag.js) - Google Analytics