Css Expression究竟该不该用?

前一段时间在做项目的时候碰到了经常会遇到的一个场景,也就是图片居中及等比例缩放的问题,一般都是采用如下办法:

实现最小宽度的几种方法及CSS
Expression[转]

Demo:

 

HTML代码:

 

CSS代码:

实现最小宽度的几种方法:css表达式尽量不用

div.imgbox{display: table-cell;vertical-align: middle;text-align:
center;width: 100px;height: 100px;border: 1px solid #999;}div.imgbox
img{vertical-align: middle;max-height: 100px;max-width:
100px;_width:expression(this.width 100 this.height = this.width ? 100:
true);_height:expression(this.height 100 this.width = this.height ? 100
: true);}

支持FF IE7  IE6

为了照顾IE6,用到了css
expression,就是在css中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置,一般这样不会有太多的问题,但是后来网页打开的时候,会出现以下的情况:

.test

后来在团队成员的努力下,终于找出了引起这个问题的根本原因:

       {

_width:expression(this.width 100 this.height = this.width ? 100: true);

              background:blue;

_height:expression(this.height 100 this.width = this.height ? 100 :
true);

              min-width:300px;

CSS
Expression的问题就在于它的计算频率要比想象的多出很多,不仅仅是在页面显示和缩放时,就是在页面滚动、甚至移动鼠标时都可能需要重新计算一次。

              width:auto !important;

给CSS
Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量,一个减少CSS
Expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS
Expression。或者采用其他办法。

              width:300px;

如果必须使用CSS
Expression,一定要清楚它成千上万次的计算对你页面的性能产生影响,甚至导致“Visual
C++ Runtime library”这样的严重错误。

              float:left;

              width:expression(document.body.clientWidth <= 300?
“300px”: “auto” );

       }

 

支持FF IE7

.test

澳门新葡亰网站注册,       {

              background:blue;

              min-width:300px;

              width:auto !important;

              width:300px;