标签与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;
  
}

        当鼠标移到图标上时效果如下:

<!DOCTYPE> 标签与Extjs在IE下的兼容性探讨_第1张图片

         当然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就会发现,它就采用了这种声明。

<!DOCTYPE> 标签与Extjs在IE下的兼容性探讨_第2张图片

 

作者: kunoy
出处: http://blog.csdn.net/kunoy
申明:作者写博是为了总结经验,和交流学习之用。
如需转载,请尽量保留此申明,并在文章页面明显位置给出原文连接。谢谢!


 

你可能感兴趣的:(css,IE,ExtJs)