css expression辅助在IE6下实现划线效果

先来看一下要实现的效果

css布局思路是在正常的li元素中放置一个正常的a标签,另一个是只放置背景的span标签,两者叠加可以产生出想要的效果。

这个效果的关键在于span标签的高度要自动适应,因为可能出现多行文字的情况,而IE6下并不支持height:100%的css用法,目前在本人看开只能用js控制了,但是如果只是为这个小元素写js的话可能会感觉负担太多,当然这是开玩笑的了。如果用到css expression,就可以模拟独立js设置span的高度了,下面来具体说一下css expression:

CSS Expressions 俗称 CSS 表达式

定义:IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

语法:left:expression(this.parent().height());这个可以根据父亲元素的高设置出left的值

但是,表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

所以在IE8发行的时候css expression这个用法将不再得到支持

posted @ 2012-09-11 20:01  andy joe专注web前端  阅读(122)  评论(0编辑  收藏  举报