<!DOCTYPE> 标签与Extjs在IE下的兼容性探讨

       关于<!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就会发现，它就采用了这种声明。

 

作者： kunoy

出处： http://blog.youkuaiyun.com/kunoy

申明：作者写博是为了总结经验，和交流学习之用。
如需转载，请尽量保留此申明，并在文章页面明显位置给出原文连接。谢谢！