关于<!DOCTYPE> 标签的详细说明在这里就不复制了(呵呵),下面谈谈Extjs在IE下存在的兼容问题。
笔者定义了一个css hover伪类:
.icon:hover, .icon.ui-draggable-dragging { background-position: 0 0; background-repeat: repeat; border: 2px #fff solid; padding: 5px 0 5px; cursor:default; }
当鼠标移到图标上时效果如下:
当然IE6是只支持a标签的,可是笔者在ie7,ie8下,打死也实现不了上图的效果,这郁闷啦!一个劲的百度“ie css兼容性”,都只得到一句话:ie6只支持a标签的hover伪类。也就是说ie7,ie8是支持的,可为什么没有效果呢?笔者也在一些N人博客询问过,解决办法是添加一个a标签,靠!这不是问题的根源啊,难道笔者的ie是山寨的?
今天本来主要任务是解决extjs在ie下显示不正常的,表示为右键菜单显示错误,按钮无效等。碰巧把上面的问题也解决了。
关键问题就在于DOCTYPE声明,由于本项目软件结构采用一般的菜单式,单独的一个界面为一个tab页,而tab页中内嵌一个extjs网页,问题就在这里,主页有一个DOCTYPE声明,内嵌的网页也有一个DOCTYPE声明,一直没有注意,这两个声明竟然不一样。
主页:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
内嵌页:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
后面统一用第二种,extjs显示正常了,右键可用了,按钮有效了!!!IE7,IE8测试均正常,世界又一次和平了。
奇怪的是,前面定义的hover伪类也显示正常了,阿弥陀佛,万能的主啊!
So,再一次百度这个不起眼的DOCTYPE,总结如下:
要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效,也就是说如果没有这个DOCTYPE声明将会导致CSS失效,特别是没有声明或声明不正确将在标准浏览器下更是不能正常显示。
而上面采用的Transitional(过渡的):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
最简便DOCTYPE声明方法:
<!DOCTYPE html> |
如果你使用过Ext Designer就会发现,它就采用了这种声明。