CSS expression在Chrome的难题

2021-01-20 14:34 jianzhan

先看1段HTML编码,在下边这段编码中,这张照片的宽度未知,我想写在CSS中写1行限定最大宽度为50px:

<div id="test">
 <img src="http://www.zishu.cn/attachments/month_0702/n2007271255.gif" />
</div>

Firefox或IE较高的版本号能够立即写max-width。在IE的低版本号访问器中,大家将会会写以下的编码:

#test img{width: expression(this.width > 50 ? '50px': true); max-width: 50px; }

但,上边的编码会有1个性化能上的难题,特性会十分的差。为何差,能够看1下以前写过的:expression为何特性差?

以便处理特性上的难题,我把编码写变成以下:

#test img{ width: expression(this.width > 50 ? function(abc){abc.style.width = '50px';}(this) : 'auto'); max-width: 50px;}

写好后,在IE和FIREFOX全是一切正常的!

可是,在Chrome中就不一样了,在这行下边的全部CSS都不可以载入;以下边的编码,最终1行CSS在CHROME中是不实行的;

#test img{ padding:10px;}
#test img{ width: expression(this.width > 50 ? function(abc){abc.style.width = '50px';}(this) : 'auto'); max-width: 50px;}
#test img{ border:20px solid #FFCC00}

在IE和FIREFOX中是能够看到照片有黄色边框的,但在CHROME中是沒有的。

 

expression在Chrome中的难题要了解有这么回事,写编码时能够绕开。
expression的物品能无需就不必用,1担用了也有特性难题,以便处理特性难题又是出来了1个CHROME的难题。
以便处理CHROME的难题就又性爱能难题了,不知道道有木有更好的方法能适配1下二者,确实不好就得出外边用JS来跑了。

以后发现是编码中的难题,谢谢fireyy 的提醒,写成这样就沒有难题了,少写了1个括号,但这样不知道为何在IE中沒有难题:

(function(abc){abc.style.width = '50px';})(this)