CSS Expression用法总结
转自http://www.chencheng.org/demo/css-expression.php
CSS Expression，动态 CSS 属性，IE 私有，自 5.0 开始引入（IE8 将不再支持），参考 MSDN，不过有时用javascript动态生成它作为IE6的hack还是不错的！
这东西的优点：
- 使 CSS 属性动态生成，所以基本 js 能干的它都能干
- 使用 CSS 选择符，比 js 遍历到某个特定元素要方便得多
这东西的缺点：
- expression 会反复执行，有严重的效率问题。它的触发似乎不是通过事件，而是通过 interval 一类的机制。
- 别的浏览器不支持，IE8 也将不再支持
- IE6 的背景闪烁 Bug Fix
body {zoom: expression(function(el){document.execCommand('BackgroundImageCache', false, true);el.style.zoom ='1';}(this));} - 给不同 type 的 input 赋予不同的样式
input {zoom: expression(function(el){el.style.zoom ="1";el.className ? el.className+=" "+el.type : el.className=el.type;}(this));} - 隔行换色（zebra lists）
.test {unicode-bidi: expression(function(el){el.style.unicodeBidi ="normal";var childs = el.getElementsByTagName("li");for(var i=0; i<childs.length; i++){(i %2)?childs[i].className+=" even":childs[i].className+=" odd";}}(this));} - 模拟 :before 或者 :after
.test {letter-spacing: expression(function(el){el.style.letterSpacing ="0";var newchild = document.createElement("span");newchild.className="after";newchild.appendChild(document.createTextNode(" World!"));el.appendChild(newchild);}(this));} - 模拟图片的：max-width 和 max-height (或 min-width 和 min-height)
.max-width span img {max-width:120px;max-height:120px;zoom:expression(function(el){el.style.zoom ="1";var resizeImg = function() {if (el.width >120|| el.height >120) {if (el.width > el.height) {el.width ="120";el.height = el.height * (el.width /120);} else {el.height ="120";el.width = el.width * (el.height /120);}}}if (el.complete) {resizeImg();} else {el.onload = function() {resizeImg();}}}(this));} - IE6的:hover
.ie6-hover input:hover, .ie6-hover .h {border:1px solid red;
}
.enable-ie6-hover input {_zoom:expression(function(el){el.style.zoom = "0";
el.onmouseenter = function() {el.className = "h";
};
el.onmouseleave = function() {el.className = "";
};
}(this));
}
- IE6下的line-height bug
bug:
fixed:
.ie6-line-height-bug { background:#f2f2f2; line-height:50px; zoom:1; }.ie6-line-height-bug-fixed input {_zoom: expression(function(el){el.style.zoom = "1";var iefixer = document.createElement("b");iefixer.style.zoom = 1;
el.parentNode.insertBefore(iefixer, el);
}(this));}
