自从Google Chrome问世以来,因为其近乎完美的W3C支持,一直用这款浏览器当做开发工具,毕竟webkit内核开始遍地开花。
但是作为程序猿,又不得不通过苦逼的解决个平台(我指web浏览器)兼容性问题来达到在客户或老板心中酷毙的形象。
extjs4对Chrome的支持甚好,但在IE9下有些BUG,我至少发现了在IE9下界面文字显示太小的问题。有图有真相:
为了控制图片文件大小,我将两个浏览器窗口都缩小至大约宽300高400后再截的图。
IE9下显示效果为:
同样的url在Chrome下效果为:
事实上按照常理,在Chrome下显示的效果才是最佳的,也就是行内所说的:显示正常。
但是恰恰在两个浏览器下有两种不同的效果。怎么使IE下和Chrome下extjs显示的文字大小一样?
推荐一个最简单的办法:
在你使用ExtUI的html页面里加上:
1
2
3
|
<
style
type
=
"text/css"
>
*{font-size:12px!important;}
</
style
>
|
然后刷新,就好了,这里主要用到了IE7/FireFox/Chrome都支持的CSS属性!important,它用来颠覆(覆盖)所有之前设定好的CSS样式值。
“*”号表示泛解析,在这里表示所有有CSS功能的HTML元素。比如在域名解析领域将所有二级域名解析至顶级域名,通常填写方法是*.domain.com=domain.com,又比如java过滤器的监听URL项配置的填写一般也用“/*”来表示监听当前目录下所有路径。
*{font-size:12px!important;} 表示将所有HTML元素的字体大小颠覆为12px,是最终设定值,曾经设置的值将被覆盖。
解决extjs4浏览器显示效果问题当然还有更好的解决方法,可以一劳永逸,只不过,这个方法最为简单。。。