大概描述一下：IE6 中，一个 replaced element 所在行的行高会有异常，具体就是 leading 似乎被吃掉了，如果连续多行都出现 replaced element，结果更糟糕，看起来就似乎 line-height 根本不起作用。PIE 那个页面没有给出 fix，刚捣腾出来一个。

具体就是，如果在 replaced element 所在行有一个 hasLayout 的 non-replaced inline 元素，此问题即可解决。可以看一下直接修改自 PIE 那个 bug demo 的 fix Demo1 (view with IE6)。

当然，如果给每个 replaced 元素手动加这个 fix，有点不靠谱，于是我又想起了 expression（当然是 without performance issue 的版本），哇哈哈……结果就有了这么一个较为简单的 fix：Demo2 (view with IE6)。

代码如下，自行变通：

* html input,* html img{
  zoom: expression(function(ele){
      ele.style.zoom = "1";
      var iefixer = document.createElement("b");
      iefixer.className="rlfix";
      ele.parentNode.insertBefore(iefixer,ele);
    }(this));
  }
.rlfix{zoom: 1;}

以上。

这东西的优点：

• 使 CSS 属性动态生成，所以基本 js 能干的它都能干
• 使用 CSS 选择符，比 js 遍历到某个特定元素要方便得多

这东西的缺点：

• expression 会反复执行，有严重的效率问题。它的触发似乎不是通过事件，而是通过 interval 一类的机制。
• 别的浏览器不支持，IE8 也将不再支持

那现在翻出来干嘛呢？因为我发现，第一个缺点是可以解决的。方法就是，在 expression 语句体里面，将触发该 expression 的 css 属性重置。比如 body{ zoom: expression(function(ele){ele.style.zoom = "1"; alert("xx");}(this));}，执行这段 CSS 会发现，alert 只跑了一次。具体可以看我上一个关于解决背景闪烁问题的帖子。

所以，解决了 expression 的效率问题，就完全可以在实战中用上了。使用时只要用一个无关紧要的 CSS 属性做触发，比如 zoom， 比如 letter-spacing，比如 unicode-bidi，等等等等，触发完了重置回默认值。可以玩的很多，我来写几个实际应用中经常会遇到的问题：

给不同 type 的 input 赋予不同的样式

支持 CSS2 选择符的可以使用属性选择符，IE 则可以用 expression 给 input 加上不同 type 对应的 class：（这个例子在经典贴过）

input{
  zoom: expression(function(ele){
    ele.style.zoom = "1";
    (ele.className)?ele.className+=" "+ele.type:ele.className=ele.type;
  }(this));
}
input[type="text"]{ border: 1px solid red;}
input.text{border: 1px solid red;}
input[type="button"]{ border: 1px solid blue;}
input.button{border: 1px solid blue;}

演示 1，这个还可以再发散发散，比如加上 :checked，:disabled 等等，改表单样式不愁啦～

隔行换色（zebra lists）

支持 CSS3 选择符的可以直接上 nth-child（webkit，opera 都支持，马上要发布的 firefox3.1 也支持），IE 则可以通过 expression 加上 odd 或 even 的 class：

.test{
  unicode-bidi: expression(function(ele){
    ele.style.unicodeBidi = "normal";
    var childs = ele.getElementsByTagName("li");
    for(var i=0; i<childs.length; i++){
      (i % 2)?childs[i].className+=" even":childs[i].className+=" odd";
    }
  }(this));
}
.test li.odd{background: #CCC;}
.test li.even{background: #EEE;}
	
.test li:nth-child(odd){
  background: #CCC;
}
.test li:nth-child(even){
  background: #EEE;
}

演示 2 (IE5+,Opera,Safari,Chrome,Firefox 3.1)

模拟 :before 或者 :after

Firefox 3.1 之后，:before 或者 :after 出来的东西可控的 CSS 属性更多了，比如 position/float，又有的玩了，不像以前基本废柴，只拿来清除浮动……大材小用啊。

.test{
  letter-spacing: expression(function(ele){
    ele.style.letterSpacing = "0";
    var newchild = document.createElement("span");
    newchild.className="after";
    newchild.appendChild(document.createTextNode(" World!"));
    ele.appendChild(newchild);
  }(this));
}
.test:after{
  content: " World!";
  color: red;
}
.test .after{color: red;}

演示 3

还有什么好玩的可以玩？想起来再来补充。

IE8 beta 2 来了，关注一下 CSS 相关的情况，以下整理自 What’s New in Internet Explorer 8 [MSDN]

• display 支持 table 那一坨东西，外加 inline-block, inline-table, run-in。
• 支持 Data URI，可以搞那些 base64 的小图标。
• 支持生成内容，就是那些 :after, :before, content, counter，quotes 一类。
• 支持 outline
• 支持若干打印相关的东东
• 支持 :lang 和 :focus 伪类

更详细的这里有张表：CSS Compatibility and Internet Explorer [MSDN]

除了上面列的那些，个人比较喜欢的还包括：

• 支持 CSS3 那一堆高级选择符了，很好很好。
• 支持 box-sizing，实用啊实用，这下可以随心所欲地捣腾而不用再受 W3C 那变态的旧盒模型折磨了

比较失望的包括：

• 不支持 CSS3 新增的伪类，:nth-child() 啦，:first-of-type 啦，:not 啦，多好的东东。
• 不支持多重背景
• 不支持 border-radius，哇靠！不支持多重背景就算了，border-radius 也不给玩，做圆角还是要累死啊

另外一个信息，由于 Firefox 2 开始自动推送 3 的更新，所以现在做东西基本可以不考虑 Firefox 2 了。一个重要的变化就是，现在可以放心大胆地玩 inline-block 了，哇哈哈哈。

body{
    zoom: expression(function(ele){
    document.execCommand('BackgroundImageCache', false, true);
    ele.style.zoom = '1';
    }(this));
}

这里用 zoom 触发，搞定之后把 zoom 写回 1（好像我很喜欢捣腾 zoom），这下就没效率问题了吧，嘿嘿。同理，其他针对 IE 的 hack，如果是只跑一次的 expression，其实都可以这样做，所谓兔死狗烹过河拆桥是也～ :D。

经过一段时间的使用，总得来说还是不错的，不过不爽也是会有滴，列个表记录一下。
这个列表随着慢慢磨合应该会不断改动，因为有可能有些爽的会发现越来越不爽，也可能不爽的后来找到了解决办法，嘿嘿。噢对了，我是从 CS 向 CS3 过渡，没碰过 CS2，可能有的地方大惊小怪了。

先来比较爽的：

• smart object，这个的确不错，小用了一把，体验很流畅。
• 图层可多选了，意味着操作可以批量了。
• Transform 里面多了一个 warp，大赞……
• 更多亮点发掘中…

然后是不爽的：

• 颜色的16进制值居然默认变成小写了，虽然没有大碍，不过对于在 CSS 里一向用大写的“轻度代码洁癖症”患者来说，还真是不舒畅啊……另外也搞不明白 Adobe 为啥去动这个设置，我实在看不出这个地方改成小写会带来什么好处……谁教我怎么改回大写～
• 图层效果原来可以直接拖动复制到其他层，现在拖动却成了移动……同样，不理解为什么 Adobe 要这么改。那个，谁教我要复制应该怎么来操作捏？现在是开始用从来不用的 style 面板了……更新，经 Uranus 点拨，原来要拖动之前按住 Alt 键，帮助要多看，嗯。
• 系统设置的 Type 里面多了个 Enable Missing Glyph Protection，这个千万要钩上啊，不然中英文混排的时候问题就来了，给一段文字设置英文字体的时候，中文都变成 XXOO 了，哇靠。我这边不知道是默认的还是自己调过，反正给取消了，郁闷了好一阵子。
• 更多烦恼积累中…

Essentially you need to re-register msxml4.dll, see below:

• Click on Start -> Run
• Enter: regsvr32 /u msxml4.dll (this command line de-registers MSXML4.DLL)
• Now enter: regsvr32 msxml4.dll (DLL is re-registered)
• You should now be able to run CorelDRAW

works

结果把服务启动，所有问题解决，so cheap

P.S. 因祸得福，由于下狠心换装了 Web Premium，顺便把 AI 激活了，嗯，懒得等 keygen 了，是不是套装 keygen 都出来了大家都没激情做单个的了？另外提醒一下，装套装之前要记得把以前的那些单独装的东西卸载干净，特别是用 VLK 激活的，要删 C:\Program Files\Common Files\Adobe\Adobe PCD\cache\cache.db，否则你就装了卸卸了装吧，想想 CS3 安装卸载时候那匪夷所思的速度，有你受的。

真是创意无限啊，想法真妙。