DEMO中的style.css有4913个选择符，大小为554kb，但在IE中却在4095个选择符之后失效，所以说明IE的CSS文件不存在不能超过288kb的限制。

所以在IE中对style标签使用addRule方法和cssText属性添加样式时都可能会碰到这个限制，比如使用addRule方法添加第4096个选择符时会报“Invalid Argument”的异常。

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

1. body、img、table、tr、th、td等元素的hasLayout一直为true。
2. type为text、button、file或select的input的hasLayout一直为true。
3. 设置{position:absolute}的元素的hasLayout为true
4. 设置{float:left|right}的元素的hasLayout为true
5. 设置{display:inline-block}的元素的hasLayout为true
6. 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：
   1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
   2. 元素在怪癖模式（compat mode）下。
7. 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。
8. 设置了{writing-mode:tb-rl}的元素的hasLayout为true。
9. 元素的contentEditable的属性值为true。
10. 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样：

{
    filter:alpha(opacity=30);
    opacity:.3;
}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的2.8.0中依旧存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是bug，具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话，YUI第一、Prototype第二、jQuery第三、Mootools垫底。

我简单的实现了设置和获取Opacity的函数，可以避开上面框架存在的bug，请在IE8标准模式下看demo12：

//设置CSS opacity 属性的函数，解决IE8的问题
var setOpacity = function(el,i){
  if(window.getComputedStyle){// for non-IE
    el.style.opacity = i;
  }else if(document.documentElement.currentStyle){ // for IE
    if(!el.currentStyle.hasLayout){
      el.style.zoom = 1;
    }
    if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block
      el.style.display = 'inline-block';
    }
    try{
      //测试是否已有filter
      //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx
      if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}

//获取CSS opacity 属性值的函数
//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
var getOpacity = function(el){
  var value;
  if(window.getComputedStyle){
    value = el.style.opacity;
    if(!value){
      value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
    }
    return value;
  }else if(document.documentElement.currentStyle){
    value = 100;
    try { // will error if no DXImageTransform
        value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
    } catch(e) {
        try { // make sure its in the document
            value = el.filters('alpha').opacity;
        } catch(err) {
        }
    }
    return value / 100;
  }
}

不得不说，这些事都是IE整出来的……

1. 使用link标记

   <link rel="stylesheet" type="text/css" href="sheet.css" />

2. 使用style元素

   <style type="text/css">
   body{background:#fff;}
   h1{font-size:2em;}
   </style>

3. 使用@import指令

   <style type="text/css">
   @import url(sheet1.css);
   @import "sheet2.css";
   </style>

4. 使用style属性的内联样式(inline style)

   <p style="color:#f00;">这是红色的字</p>

在实际应用中，使用style属性的内联样式是不推荐使用的，XHTML1.1已经将其标准为不建议使用，原因很简单这种方式不比font标记强多少，削弱了CSS集中控制整个文档外观的优点。前3种方式利用了link标记和style标记，在IE(包括IE6、IE7和IE8 beta1)中有如下限制：

1. 文档中只有前31个link或style标记关联的CSS能够应用。

   从第32个开始，其标记关联的CSS都将失效。IE的官方文档All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及这个限制，包括在使用.xsl的.xml文件也有这个限制。但是似乎写错了数量。请在IE看：

   例1：34个style标记同时应用

   例2：1个style标记和34个link标记同时应用

2. 一个style标记只有前31次@import指令有效应用。

   从第32个@import指令开始忽略。请看：

   例3：在一个style标记中使用34次@import指令。

3. 一个css文件只有前31次@import指令有效应用。

   从第31个@import指令开始忽略。请看：

   例4：用link标记引入一个使用34次@import指令的css文件

   例5：用style标记引入一个使用34次@import指令的css文件

   例6：用link和style标记分别引入一个使用31次@import指令以上的css文件

4. 一个CSS文件的不能超过288kb？IE中每个style标签或css文件的选择符个数不能超过4095

   这个消息来自Internet Explorer CSS File Size Limit。

5. @import指令下层叠限制不能超过4层

   在IE下通过@import指令引入css文件时，第5层会失效。这个限制来自Cascade limit via @import rule。实际上，由于浏览器对多层嵌套的支持不完善，所以即使不得已使用了@import指令引入CSS文件，也不要超过2层。

IE对CSS的限制在绝大部分情况下是不会遇到的，即使遇到最佳的解决方案也应该是手动或者通过后端程序对CSS文件和响应的标记进行合并，最小化的http请求数是优化页面呈现的第一原则。

在IE中，可以通过document.styleSheets对象（Firefox、Opera9和Safari3.1都支持）修改内联和嵌入样式的值。该对象仅在文档包含style或link元素时可用，其实用document.styleSheets.length就可以看出IE下这个值最大是31。下面是利用Javascript来合并link和style标记来解决IE下的限制：

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
    return;
}
var aSheet = document.styleSheets,
    aStyle = document.getElementsByTagName('style'),
    aLink  = document.getElementsByTagName('link');
    if(aStyle.length + aLink.length < 32 || !aSheet[0].cssText){
        //document.styleSheets.cssText 只有IE支持 
        return;
    }
    var aCssText = [],aCloneLink = [];
    //把style标签中的样式存入，然后删掉该标签，但保留第一个
    //因为由getElementsByTagName方法返回值是nodeList，所以删除时循环用倒序
    for(var i=aStyle.length-1;i>-1;--i){
        var o = aStyle[i];
            aCssText.push(o.innerHTML);
            if(i>0){
                o.parentNode.removeChild(o);
            }
    }
    //在IE中只有在31之内的link标签才能通过其styleSheet.cssText获取样式
    //无法的获取复制到一个数组aCloneLink中
    for(var i=aLink.length-1;i>-1;--i){
       var o = aLink[i];
          if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
               if(o.styleSheet){
                  aCssText.push(o.styleSheet.cssText);
               }else{
                   aCloneLink.push(o.cloneNode(true));
               }
               if(i>0){
                   o.parentNode.removeChild(o);
               }
          }
    }
    var oHead = document.getElementsByTagName('head')[0];
    //通过前面的删除，前31个link或者style标记最多只剩下2个
    //通过重新增加link节点的方法激活其styleSheet属性，从而获取样式
    for(var i = aCloneLink.length-1;i>-1;--i){
        var o = aCloneLink[i];
        oHead.appendChild(o);
        aCssText.push(o.styleSheet.cssText);
        oHead.removeChild(o);
    }
   //把所有的样式都复制给第一个标签
    aSheet[0].cssText += aCssText.join('');
}

上面仅仅是一个简单的粗糙的解决方案，演示请看例1和例2，可以改进的地方还有：

1. 没有考虑media这个属性，如果有多个media应该分别合并，当然更没有考虑link标记的rel="alternate stylesheet"带来的影响。但我更建议通过@media指令把相应的样式写在同一个文件中，至少可以减少HTTP连接数。
2. 没有解决@import指令31次限制的问题，其实可以提取其href值然后进行激活处理。但是实际应用在建议用link标记来替代@import指令，因为在IE中@import指令相当与把link标记写在文档的底部，会导致在IE5/6页面加载时瞬间无样式问题，学名叫“Flash of Unstyled Content”（简称为FOUC）的bug，当然可以通过在文档头中放一个link或script元素可以避免这个bug。
3. 一般来讲页面之所有出现大量的link或者style标签很可能有很多是相同的，可以在aCssText合并前除掉相同的项，减少代码量。

如果不用DOM中已存在的样式元素直接通过cssText属性添加样式代码，而是创建一个新的样式元素来添加，一定要注意先把新建的样式元素先添加到DOM中，然后再通过cssText属性添加样式代码。反之，其添加的样式代码似乎先被IE6的样式解析器解析后才添加，这样!imporant和hack都将失效。请看例7。不建议通过添加新的样式元素的方式来添加新的样式，这样很容易达到IE的限制条件。

使用Javascript库

Ajax的流行和巨大威力，让我们重新审视了Javascript的开发，也直接促使各种库的出现。对于普通的开发者，使用一些适合自己的Javascript库不仅可以避免Ajax应用上的浏览器兼容等问题，也使其开发更加的稳定和高效。这里列一些我知晓的轻量级的Javascript库：

1. YUI：YAHOO出品，组件丰富强大健壮稳定，是团队协作开发的首选。
2. JQuery：灵活、高效，其基于CSS3 和XPath的选择器语法引擎非常的强大和完整。
3. Prototype：是一个非常优雅的Javascript库，最经典的莫过于$符号了，DWR，JQuery都被它吸引了。在它基础上出现了script.aculo.us。
4. Mootools：核心语法和Prototype比较类似，但是用过之后才知道什么叫简单轻巧和短小精悍。

编码问题

通过XMLHttpRequest获取的数据，默认的字符编码是UTF-8，如果前端页面是GB2312或者其它编码，显示获取的数据就是乱码。通过XMLHTTPRequest，POST的数据也是UTF-8编码，如果后台是GB2312或者其他编码也会出现乱码。解决方法：

1. 统一到UTF-8。这也是国际化的必然趋势。
2. 输出通过XMLHttpRequest获取的文本文本时，在headers中增加文本声明(直接HTML声明没有作用)。如：

   PHP:header('Content-Type:text/html;charset=GB2312');
   ASP:Response.Charset = "GB2312"
   JSP:response.setHeader("Charset","GB2312");

3. WWW服务器上强制声明。比如：apache下的配置：AddDefaultCharset GB2312这种情况主要是应对通过XMLHttpRequest访问的文件是静态文件，无法声明headers的情况下。
     静态页面一般都会经过Apache的deflate或gzip压缩，此时在上面情况下IE中，首次通过XMLhttpRequest获得的数据可以正常显示，但再获取数据显示时出现乱码，这次因为再次获取的数据来自缓存，可能由于浏览器解压缩的问题导致Apache设置的默认编码声明丢失。由于这种情况下一般是纯文本，可能还无法禁止缓存，可以设置XMLhttpRequest访问的文本文件不压缩来解决这个问题。

4. 非UTF-8页面通过XMLHttpRequest获取的文本文本输出前字符转码成unicode，或者编码直接是UTF-8，可以正常显示。如实例所示。

IE下的缓存问题

由于IE的缓存处理机制问题，每次通过XMLHttpRequest访问动态页面返回的总是首次访问的内容，解决方法有：

1. 客户端通过添加随机字符串解决。如：

   var url = 'http://dancewithnet.com/';
   url +=  '?temp=' + new Date().getTime();
   url +=  '?temp=' + Math.random();
   

2. 在HTTP headers禁止缓存。如：

   
   HTTP:
   <meta http-equiv="pragma" content="no-cache" />
   <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
   <meta http-equiv="expires" content="Thu, 01 Jan 1970 00:00:01 GMT" />
   <meta http-equiv="expires" content="0" />
   
   PHP：
   header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");
   header("Cache-Control: no-cache, must-revalidate");
   header("Pragma: no-cache");
   
   ASP：
   Response.expires=0
   Response.addHeader("pragma","no-cache")
   Response.addHeader("Cache-Control","no-cache, must-revalidate")
   
   JSP：
   response.addHeader("Cache-Control", "no-cache");
   response.addHeader("Expires", "Thu, 01 Jan 1970 00:00:01 GMT");
   

3. 在XMLHttpRequest发送请求之前加上：

   XMLHttpRequest.setRequestHeader("If-Modified-Since","0");
   XMLHttpRequest.send(null);
   

IE下的reponseXML问题

使用responseXML时，IE下只能接受.xml为后缀的XML文件，如果不能以.xml文件为结尾的，则需要如下处理：

1. 在服务器端声明是xml文件类型。如

   
   PHP:header("Content-Type:text/xml;charset=utf-8");
   ASP:Response.ContentType = "text/xml";
   JSP:response.setHeader("ContentType","text/xml");

2. 利用responseText获取，然后封装成XML。
3. 在AJAX应用上，JSON和JsonML是XML非常好的替代品。

虽然<input type=”file” />有一个属性readonly，但是当这个属性生效时，IE下不仅不能编辑，也不能通过“浏览…”按钮选择，而在Firefox和Opera下完全没有任何作用。所以只能通过其他手段来达到目的了，即阻止通过键盘或鼠标对文件输入框的操作。有如下三种方法：

方法1：直接通过Javascript阻止通过键盘或鼠标对文件输入框的操作

1. 利用IE独有的contenteditable属性能阻止输入框被编辑，同时给上传文件控件加入keydown时执行click方法，相当于鼠标点击了“浏览…”按钮。
2. Firefox下上传文件控件不支持click方法，只能发生keydown事件时让上传文件控件获取焦点（“浏览…”按钮获取焦点）来阻止键盘的输入，但是当输入框获取焦点时，按下退格键(backspace)时，会发生“返回上一页”的默认动作，需要额外处理。
   但是，这种处理阻止不了通过菜单栏上的粘贴和剪切按钮对文件输入框的编辑。
3. 由于键盘事件的不同，Opera下需要处理keypress事件来阻止键盘的输入。
   但是，这个方法阻止不了退格键、删除键和右键粘贴剪切菜单对文本输入框的编辑。

请看方法1的演示实例

方法2：利用浮动层遮盖住上传文件控件的输入框部分

1. Firefox和Opera下通过scrollWidth和scrollHeight来获取上传文件控件的大小，然后减去按钮部分，建立一个div层遮盖其输入框部分。
   但是，当通过键盘或者鼠标缩放网页的时候，覆盖层会错位，需要刷新才会重新复位。
2. IE下scrollWidth和scrollHeight获取的数值有问题，所以采用方法1的解决方案。

请看方法2的演示实例

方法3：用input和button伪装成上传文件控件，真正的上传文件控件透明的浮动在其上面

对于上传文件控件的处理方式和方法1一样，但是因为伪装的原因，可以解决方法1中Opera下退格键、删除键和剪切按钮对文本框的编辑，但是依旧解决不了Firefox粘贴按钮和Opera下右键粘贴按钮对其的编辑。

其实这个方法的最大好处就是可以随心所欲的修改上传文件控件的样式。

请看方法3的演示实例

方法4：利用CSS，使透明的上传控件只出现按钮部分，且浮动在指定按钮的上面

因为也是伪装，所以也可以随心所欲的控制样式，这个方法应该是比较彻底的实现了只选择不能编辑的目标。需要注意的是通过设置上传控件的font-size，可以改变它的大小。（多谢小马和许湛）

请看方法4的演示实例

ps,javascript代码是基于YUI的，目的是为了说明解决思路，转化为其他框架或者脱离框架都很容易。

1. IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易实现（《详解定位与定位应用》）
2. IE6不支持该属性，但是在使用!DOCTYPE 声明指定standards-compliant（标准）模式可以通过CSS hack实现
3. 上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案，但是可以通过IE特有的expression在CSS中实现（移动网页时固定元素会动），这和常见浮动Logo广告利用Javascript实现原理是一样的，只不过可以直接写在CSS中比较简便的
4. 利用IE独有的条件注释语句可以针对不同的IE版本精确设置，同时避免了这些代码被其他浏览器读到，个人认为比纯粹的CSS Hack好，如果你安装了多个IE（包括绿色版本），条件注释将会以最高版本的IE为标准。

实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......}   针对IE7、Opera、Firefox一行搞定
</style>
IE6中利用容器对溢出内容的处理方式来实现的
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的，这是设置right:17px的原因
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>

代码演示1（单个IE，纯粹通过条件注释区分IE浏览器）

代码演示2（多个IE，通过条件注释+CSS hack区分IE浏览器，明显的比纯粹条件注释复杂且不易读，放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果，下同。）

或许有人像我一样，在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时，喜欢在声明前面加上XML Prolog(如：<?xml version="1.0" encoding="utf-8"?>)，但此时IE7以下都处于Quirks（兼容）模式，所以上述针对IE6的Hack失效，这个时候你可以对IE6也通过expression来实现。

当IE6处于quriks模式时，IE6和IE5.5对CSS解析方式几乎雷同，所以当看到《position:fixed for Internet Explorer》时，我找到了在Quirks模式下IE6/IE5.5/IE5统一的CSS解决方案：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
......
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>

代码演示3（单个IE，纯粹通过条件注释区分IE浏览器）

代码演示4（多个IE，通过条件注释+CSS hack区分IE浏览器）

对比两个纯粹的CSS hack发现，两个原理似乎相同，在于html元素和body元素的应用和对CSS的{position:fixed}的支持程度上，但是这实际上是一种Hack，基本上不具备通用性，知道这个方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管给它设置什么样的高度和宽度，它的大小都始终充满整个浏览器的可视区域，而IE5 以及 Quirks 模式下html元素和body元素所有宽高设置都会被忽略而保持充满浏览器的可视区域，更多内容请看《IE 中的 html 元素》

或许有人会想，现在可以引入了XML Prolog又能用纯CSS方法解决了IE7以下的问题，这下爽了，但是加上XML Prolog后突然发现IE6处于Quirks模式，以前在standards-compliant模式下的设计又变形了，呵呵，这就是咱们搞IE的下场。

1. IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
2. 条件注释只能用于IE5以上。
3. 如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
4. 条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
5. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

二、条件注释属性

• gt : greater than，选择条件版本以上版本，不包含条件版本
• lt : less than，选择条件版本以下版本，不包含条件版本
• gte : greater than or equal，选择条件版本以上版本，包含条件版本
• lte : less than or equal，选择条件版本以下版本，包含条件版本
• ! : 选择条件版本以外所有版本，无论高低

三、条件注释使用方法

注意把代码中的<>换成英文中相应的大于或小于号

<!--[if IE 5]>仅IE5.5可见<![endif]-->
<!--[if gt IE 5.5]>仅IE 5.5以上可见<![endif]-->
<!--[if lt IE 5.5]>仅IE 5.5以下可见<![endif]-->
<!--[if gte IE 5.5]>IE 5.5及以上可见<![endif]-->
<!--[if lte IE 5.5]>IE 5.5及以下可见<![endif]-->
<!--[if !IE 5.5]>非IE 5.5的IE可见<![endif]-->

下面的代码是在非IE浏览器下运行的条件注释

<!--[if !IE]><!-->
您使用不是 Internet Explorer
<!--<![endif]-->
<!--[if IE 6]><!-->
您正在使用Internet Explorer version 6或者 一个非IE 浏览器
<!--<![endif]-->

参考

• [1]IE中的条件注释
• [2]条件注释理论及实践

由于专利问题，Microsoft 将被迫更改 IE 处理 ActiveX 控件的交互方式。所以Microsoft 即将发布一个用于 Microsoft Windows XP Service Pack 2 (SP2) 和 Microsoft Windows Server 2003 Service Pack 1 (SP1) 的 Microsoft Internet Explorer 6 的软件更新。据悉该更新将于6月2日正式开始。此更新可更改 Internet Explorer 处理某些使用 ActiveX 控件的网页的方式。使用 ActiveX 控件的程序包括以下这些：

• Adobe Reader
• Apple QuickTime Player
• Macromedia Flash
• Microsoft Windows Media Player
• Real Networks RealPlayer
• Sun Java Virtual Machine

安装此更新后，在启用 ActiveX 控件之前，您无法从某些网页与这些控件交互。要启用 ActiveX 控件，请手动单击该控件。Web 开发人员还可以使用其他技术来更新他们的网页。有关这些技术的更多信息，请访问下面的 MSDN 网站：http://msdn.microsoft.com/ieupdate

作为此 Internet Explorer 更新的一部分，Microsoft 会将更新发布到 Windows XP 和 Windows Server 2003 的当前版本中。所有客户端操作系统都将得到更新。这些客户端操作系统包括：

• Windows XP Starter Edition
• Windows XP Home Edition
• Windows XP Professional Edition
• Windows XP Tablet PC Edition
• Windows XP Media Center Edition
• Windows XP Professional for Embedded Systems

目前，Microsoft 尚未发布针对早期版本的 Internet Explorer、Windows Server 2003 或 Windows XP 的更新。但 Microsoft 以后可能会发布针对这些早期版本的更新。

二、产生的问题和表现

当网页用APPLET、EMBED和OBJECT标签下载的activeX控件，在控件的用户接口在用户激活之前是被阻止的。如果一个页面用这些标签下载多个控件，每个控件都需要分别被激活。

当一个控件处于未激活状态，它不会响应用户的输入，它只会执行操作，但不包括交互部分。当一个未激活的控件被创建，IE会用不同的技术来阻止键盘和鼠标的触发。例如，打开一个包含Flash的页面，Flash开始播放，但是它不会相应用户的交互请求，比如点击这个Flash而跳转到相应的URL，而是出现一个“单击以激活并使用此控件”，只有点击出发该控件，再次单击才出发跳转。

注意，控件不响应用户的直接交互，但相应脚本的请求。

激活一个交互控件可以点击，也可以通过Tab键设定焦点后按回格（Backspace）键或回车（Enter）键。

一些独立窗口的控件在IE中运行之前，会出现一个提示。用户需要点击信息窗口中的按钮来运行这个控件。控件下载后，不在需要激活。

下面的控件具有这种行为：

• Virtools™ Web Player from Virtools SA
• Macromedia Shockwave Player™ from Adobe Systems Inc.
• QuickTime™ from Apple Computer, Inc.

所以页面运行时可能出现的问题有：

滚动

当使用鼠标轮在包含交互式控件的页面中滚动时，该控件可能无法正确显示。

抽象窗口工具包

据报告，在用户界面中使用抽象窗口工具包 (AWT) 类的 Java 程序中存在访问冲

透明 Flash

整页广告虽然消失，但焦点框仍在。在这种情况下，控件仍在原位置，但却是透明的。因此，关联的覆盖窗口留 在页面上。

DHTML 菜单

当展开一个 DHTML 菜单时，该菜单可能出现在 ActiveX 控件的顶部。在这种情况下，如果单击该菜单，则会启用该控件而不是访问 DHTML 菜单。覆盖窗口具有最高的 Z 顺序。因此，此窗口收到鼠标单击消息。

在加载之前进行提示的控件

在将某些控件加载到网页时，此更新的功能不会正确屏蔽这些控件。Macromedia Shockwave Director、QuickTime Player 和 Virtools Web Player 中使用的控件都属于这类控件。当 Windows 确定某个控件处于非活动状态时，系统会在加载该控件之前提示用户。

控件上的 CSS 属性

对于隐藏的控件，或者显示模式虽然设置为“无”但却具有尺寸大小的控件，当您将指针在它们上面移动时，将显示焦点框。

三、解决办法

虽然activeX控件不响应用户的直接交互，但相应脚本的请求，所以目前看到的解决方案都是通过外部的脚本来实现的。

1、Microsoft的解决方案

MS建议用外部的JScript文件下载控件实现用户可以直接和控件交互的问题。这个JScritpt文件必须是外部文件，如果直接写入网页HTML文件中，将不起作用。不能用JScript函数或者服务端脚本控制控件是否激活。具体实现方法如下：

1）使用document.write下载控件。

注意，不能在外部脚本文件通过 writeln函数来实现，因为该函数是把脚本插入到原始的HTML文档中。

<!-- HTML File -->
<html>
  <body leftmargin=0 topmargin=0 scroll=no>
    <script src="Embed.js"></script>
  </body>
</html>

// embed.js
document.write('<embed src="examplecontrol">')

外部文件也可以通过修改一个标签的outerHTML的属性来实现。

<!-- HTML File -->
<html>
  <body>
    <div>
      <script src="embedControlOuterHTML.js"></script>
    </div>
  </body>
</html>

// embedControlOuterHTML.js
embedControlLocation.outerHTML = '<embed src="examplecontrol">';

2）用 document.createElement创建Object标签下载activeX控件。

注意：当用document.createElement在一个页面创建Object和Embed标签，要仔细创建标签和初始化它的属性，在通过新标签下载activeX控件前加入页面的DOM中。详细信息可以查看MS的createElement文档。

<!-- HTML File -->
<html>
  <body>
    <div id="DivID">
      <script src="createElementExplicit.js"></script>
  </body>
</html>

// createElementExplicit.js
var myObject = document.createElement('object');
DivID.appendChild(myObject);
myObject.width = "200";
myObject.height = "100";
myObject.classid= "clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6";
myObject.URL = "example.wmv";
myObject.uiMode = "none" ;

3）当有特别参数时，用innerHTML和JScript来下载activeX控件。

<!-- HTML File -->
<html>
 <head>
   <script src="external_script.js" language="JScript"></script>
 </head>
 <body>
   <div id="EXAMPLE_DIV_ID">
      This text will be replaced by the control
   </div>
   <script language="JScript">
     CreateControl( "EXAMPLE_DIV_ID",
                    "clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6",
                    "EXAMPLE_OBJECT_ID", "600", "400", "example.wmv",
                    "-1")
   </script>
 </body>
</html>

// external_script.js
function CreateControl(DivID, CLSID, ObjectID,
                       WIDTH, HEIGHT, URL, AUTOSTART)
{
  var d = document.getElementById(DivID);
  d.innerHTML =
    '<object classid=' + CLSID + ' id=' + ObjectID +
    ' width=' + WIDTH + ' height=' + HEIGHT +'>
    <param name="URL" value=' + URL + '>
    <param name="autoStart" value=' + AUTOSTART + '/>';
}

2、Adobe的解决方案

针对其产品 Macromedia Flash, Shockwave, or Adobe Acrobat files的解决方法。

1. 当只有一个嵌入内容或少量的嵌入内容时，直接用一个独立的外部JS文件来下载activeX控件。
   1. 创建外部文件 foo.js

      function RunFoo()
      {
          document.write('<object classid="clsid:D27CDB6E..." ...>\n');
          document.write('<param name="movie" value="foo.swf" />\n');
          document.write('</object>\n');
      }
      

   2. 把foo.js加入相关页面的head标签中

      <script src="[path]/foo.js" type="text/javascript"></script>

   3. 用下面代码替换 <object> , <embed> 和 <applet>标签<script type=”text/javascript”>RunFoo();</script>
2. 当嵌入大量的活动内容，且嵌入方式多样，下面是一种很好的解决方案。
   1. 下载Adobe提供的必须js文件。该文件包括三个部分：
      • AC_RunActiveContent.js：针对 Flash 和 Shockwave 嵌入内容的；
      • AC_ActiveX.js：针对其他的嵌入内容；
      • SampleActiveContent.html：使用例子。
   2. 把AC_RunActiveContent.js加入相关页面的head标签中<script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>
   3. 用下列函数来表达Object和Embed标签中的内容，并取代相关标签。

      用于Flash

      AC_FL_RunContent(
          "att1Name","att1Value",
          "att2Name","att2Value",
          ...
          "attnName","attnValue"
      );
      

      用于 Shockwave

      AC_SW_RunContent(
          "att1Name","att1Value",
          "att2Name","att2Value",
          ...
          "attnName","attnValue"
      );

      例如：

      
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
      width="550" height="400" align="middle">
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="movie" value="foo.swf" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#ffffff" />
      <embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo" align="middle"
      allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/go/getflashplayer" />
      </object>
      <script type="text/javascript" >
      AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0',
      'width','550','height','400','align','middle','src','foo','quality','high','bgcolor','#ffffff','name','foo',
      'allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','foo' );
      </script> 

   4. 针对不支持script的浏览器，标签表达内容可以放入<noscript>标签中。

   3、使用deconcept 的flashObject。

   flashObject是一个探测和嵌入Flash的javascript脚本。它能够所有在PC和MAC上的主流Flash插件，为嵌入Flash Movie而设计。它有利于搜索引擎，且能通过HTML验证。

   1. 下载FlashObject 1.3
   2. 把flashobject.js加入页面的head标签中
   3. 具体代码如下：

      HTML代码

      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
      #version=7,0,19,0" width="550" height="400" align="middle" id="foo">
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="movie" value="foo.swf" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#ffffff" />
      <param name="flashvars" value ="variable1=value1&variable2=value2" />
      <embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550"
      height="400" name="foo" align="middle" flashvars="variable1=value1&variable2=value2" allowScriptAccess="sameDomain"
      type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/go/getflashplayer" />
      </object>
      

      flashObject代码：

      <div id="flashcontent" style="width: 550px; height: 400px"></div>
      <script type="text/javascript">
         var fo = new FlashObject("foo.swf", "foo", "550", "400", "7", "#ffffff");
         fo.addParam("allowScriptAccess", "low");
         fo.addParam("wmode", "sameDomain");
         fo.addParam("quality", "high");
         fo.addVariable("variable1", "value1");
         fo.addVariable("variable2", "value2");
         fo.write("flashcontent");
      </script>
      

   4. 更多内容可以查看flashObject文档。

   四、总结

   依据微软的技术信息和上述解决方案来看，解决问题的核心法就是实现active控件下载和主页面分离。其主要办法有两个：

   1. 利用javascript的document.write或innerHTML把下载activeX控件的标签从页面分离出去。
   2. 利用javascript构造activeX控件下载函数，把需要下载的activeX标签属性写入函数。

   采用js和页面分离是最容易实现的办法。但是从长远和易用性角度来看，应用flashObject类似的方法，是一个很好的选择。

   Reference：

   • [1]Internet Explorer ActiveX 更新
   • [2]Activating ActiveX Controls
   • [3]Preparing Websites with Active Content for Announced Browser Changes
   • [4]FlashObject: Javascript Flash detection and embed script

   五、更巧妙的方法[2005.05.29]

   今天又发现一种解决方案，；利用原理是一样的，但是解决方案另辟蹊径，显示出非常高的技巧，该方法对原有页面有大量的通过js直接写在主页面上情况提供了非常便捷的解决方案。

   使用方法如下：

   1、把下面代码放入一个js文件中。

   if(typeof(dclk_isDartRichMediaLoaded) == "undefined") {
    dclk_isDartRichMediaLoaded = true;
    function dclkWrite(str){
     if(dclk_shouldOverride) {
      dclk_original_documentWrite(str);
     }
     else{
      document.write(str);
     }
    }
    function dclkWriteln(str){
     if(dclk_shouldOverride) {
      dclk_original_documentWriteLn(str);
     }
     else{
      document.writeln(str);
     }
    }
    function dclk_isInternetExplorer() {
     return (navigator.appVersion.indexOf("MSIE") != -1
                          && navigator.userAgent.indexOf("Opera") < 0);
    }
    dclk_shouldOverride = dclk_isInternetExplorer();
    if(dclk_shouldOverride) {
     dclk_original_documentWrite = document.write;
     dclk_original_documentWriteLn = document.writeln;
     document.write = dclkWrite;
     document.writeln = dclkWriteln;
    }
   }
   

   2、通过js链接方式把改代码链入到主文件的头部即可。

   注意，该段代码不能直接写入主文件中，也不能跨域调用。

   改代码通过链接嵌入的js函数，实现了document.write＆document.writeln方法＆主页面的分离，从而实现了需要触发activeX控件的HTML代码＆主页面分离，非常的精巧。

   此代码不能解决一种情况，就是通过innerHTML属性写入需要触发activeX的HTML代码，不过通过上面解决问题的思路，应该也有合适的方法巧妙的解决。

   六、又一个巧妙的解决方案，殊途同归_2007.11.14。

   
   if(window.ActiveXObject){
   	var _FLash_Objects=document.all.tags("object");
   	for(var i=0;i<_FLash_Objects.length;i++){
   		var _t_obj=_FLash_Objects[i];
   			_t_obj.outerHTML=_t_obj.outerHTML;
   	}
   }

   ps，来自IEBlog的一个好消息：IE计划从2008年4月起通过升级实现无需点击使用ActiveX控件。

   ]]> http://dancewithnet.com/2006/04/20/solution-after-ie-activex-updated/feed/ 4 http://dancewithnet.com/2006/03/31/microsoft-bugs/ http://dancewithnet.com/2006/03/31/microsoft-bugs/#comments Thu, 30 Mar 2006 16:27:00 +0000 秦歌 http://dancewithnet.com/?p=231 微软最近够郁闷了，开发了5年、耗资60亿美元、达到5000万行的发现数万漏洞的Vista宣布延期推出，一片哗然，甚至出现了报道说有微软的员工说如果此事追究责任CEO应该辞职。但是不管微软的操作系统如何，但是构建了大多数人的电子信息世界的基础，只能打着补丁用着现有的等着未来的。同样糟糕的还有IE，IE最大的特色就是莫名其妙，莫名奇妙的HTML和CSS解析，莫名奇妙的JS错误提示，还有更多的莫名奇妙的编译事件，比如说今天，我帮小四同学找IE6.0的下载地址，肯定要去microsoft.com这个全世界流量最大的公司网站了，谁知道打开首页就晕了，怎么微软公司的首页也会出现用老外的话说shit的事情呢？三个广告图片两个图片不显示，刷新几次都如此，晕到。我截了一个图，准备发给bill gates，然后继续工作。
   

   下午的时候，又帮助另外一个朋友下载IE，突然发现，三个广告图片，两个不显示的显示了，显示的不显示了，刷新依然。
   

   我就感觉很奇怪了，用Firefox、IE5.5和IE5.0都没有问题，IE6.0下就是有问题，而我的IE6又没有问题，或许这就是所谓的灵异时间吧。操作系统，可能对很多人来讲都不好选择，除了微软，别无分店，但是浏览器还有Firefox，还有Opera，自从Opera免费推出8.0开始，我就一直使用，蛮喜欢的，虽然在某些js下不是特别稳定，但是还是强烈推荐大家使用了，用就用8.5了，这年头还有谁去用6z用的那个7.5呢？IE7.0的beta对CSS2.0的支持，不比6.0强多少，修正了一些bug，最终发布我能期望更多嘛？更不要奢求SVG和E4X的支持了。

   ]]> http://dancewithnet.com/2006/03/31/microsoft-bugs/feed/ 0