使用CSS Expression解决某些浏览器兼容问题

by: ponytail @ 15 十二, 2008 in: ┨DIV+CSS

虽然无奈，但是不想一有什么就去写JS，冲突也会是个头痛的问题，所以这个Expression还是挺有用的，在CSS代码后插入expression语句，自定义控制属性，只被IE识别的方法，通常针对IE6及其一下的版本居多，IE7对CSS的支持已经有了很大改进，会用到的情况比较少，IE8已宣布在其标准模式下不再支持这一语句，呵呵，多好啊，以后为不同版本的IE还要多写几份HACK，咱们不怕没工作做了哩~~无奈到想哭。。。

1. min-width/max-width 控制容器最小宽度或图片最大宽度，对IE6及其以下版本无效

div {
width:100%;
min-width:600px;
width:expression(this.Width < 600 ? “600px” :”100%” );
}

img {
max-width:750px;
width:expression(onload=function() {
this.style.width=(this.offsetWidth > 750)?”750px”:”auto”
}

/*
max-width: 750px;
width:expression(this.offsetWidth> 750? “750px” : this.offsetWidth+”px”) ;
不要使用这种写法，初次载入图片有时会很小，需刷新
*/

2. position:fixed IE6下无效

div {
position: absolute;
top:expression(eval(document .compatMode && document .compatMode==’CSS1Compat’) ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) – 1 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) – 1;
}

div {
position: absolute;
left: expression( (johndoe2 = document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft ) + ’px’ );
top: expression( (johndoe1 = document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop ) + ’px’ );
}

实际用了下，上面那种好像不太保险的，下面这个OK的~~ 但是注意，这种方式因为是不停的用expression计算位置，滚动过程中会有抖动的

另外还找到了一种JS实现方法，如果你有多个需要固定的DIV，并且这种方式没有抖动~~

3. 实现伪类的Hover效果

span.link {
cursor:pointer;
color: blue;
text-decoration: none;
m: expression(this.onmouseover = new Function(“this.className = ”link-hover”;”));
}

4. 消除页面链接虚线

a {
star: expression(onfocus=this.blur)
}

其他还有做隔行换色表格啦~鼠标移上更换图片啦~其他什么的，需要注意的是，expression这种东西能不用还是不要轻易使用，因为是比较消耗浏览器资源滴，不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。

在新型浏览器迈着轻松的步子优雅前行的时候，身后不知道瘫倒着多少像俺这样写HACK的可怜娃啊，喂！~ 还真就说不管就不管啦？~ 那你起码回个头把你家不争气的小子处理掉先啊！~~ 555，还真是可怜的娃，谁都来欺负一把，现在是IE三兄弟、FF3、Safari、Opera、Chrome都压上身了，我爬。。。好重。。。