CSS expression在Chrome的問題

先看一段HTML代碼,在下邊這段代碼中,這張圖片的寬度未知,我想寫在CSS中寫一行限制最大寬度為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; }
但,上邊的代碼會有一個性能上的問題,性能會非常的差。為什么差,可以看一下之前寫過的:expression為什么性能差?
為了解決性能上的問題,我把代碼寫成了如下:
#test img{ width: expression(this.width > 50 ? function(abc){abc.style.width = '50px';}(this) : 'auto'); max-width: 50px;}
寫好后,在IE和FIREFOX都是正常的!
但是,在Chrome中就不同了,在這行下邊的所有CSS都不能加載;如下邊的代碼,最后一行CSS在CHROME中是不執(zhí)行的;
#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的東西能不用就不要用,一擔用了還有性能問題,為了解決性能問題又是出來了一個CHROME的問題。
為了解決CHROME的問題就又有性能問題了,不知道有沒有更好的辦法能兼容一下兩者,實在不行就得在外邊用JS來跑了。
之后發(fā)現(xiàn)是代碼中的問題,感謝fireyy 的提示,寫成這樣就沒有問題了,少寫了一個括號,但這樣不知為什么在IE中沒有問題:
(function(abc){abc.style.width = '50px';})(this)
相關文章
- 用CSS的expression判斷表達式設置input樣式,簡單,輕量級。缺點在于expression判斷表達式FireFox是不支持的。致命的是只能區(qū)分出一個(例如例子中就只能區(qū)分出text文本框2009-06-14
優(yōu)化瀏覽器渲染 避免CSS expressions
CSS表達式會降低瀏覽器的渲染性能;用其他方案替換它們將會改善IE瀏覽器的渲染性能。2010-03-09CSS中使用expression完美設置頁面最小寬度(兼容ie)
CSS中使用expression有ie才能識別,其把CSS屬性和Javascript表達式關聯(lián)起來,效果相當于min-width,即實現(xiàn)了兼容ie,示例如下,感興趣的朋友可以參考下,希望對大家有所幫2013-07-31css expression使用概述及其優(yōu)缺點介紹
css expression(css表達式)又稱Dynamic properties(動態(tài)屬性)是早期微軟DHTML的產(chǎn)物,微軟從IE8 beta2標準模式開始,取消對css expression的支持,感興趣的朋友可以了解下2013-11-04CSS行為expression輕松實現(xiàn)IE6無抖動固定定位
IE6不支持固定定位(position:fixed)是眾所周知的事情,想在IE6做出固定定位的效果就只能用JS,用js會出現(xiàn)“跳動”的效果,下面為大家介紹下CSS中的行為expression2014-03-03CSS表達式(expression)解決IE6 position:fixed無效問題
IE6 position:fixed無效在做兼容時,很是頭疼,本例通過一條Internet Explorer的CSS表達式(expression)來完美的實現(xiàn)ie6下position:fixed效果,有需要的朋友可以參考下2014-07-28- 這篇文章主要介紹了CSS中使用expression表達式,需要的朋友可以參考下2014-12-22