<DOCTYPE> 标签与Extjs在IE上的兼容性探讨
日期：2014-05-16 浏览次数：20417 次
关于<!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就会发现，它就采用了这种声明。
如需转载，请尽量保留此申明，并在文章页面明显位置给出原文连接。谢谢！
