CSS教程:expression在Chrome的问题

2016-02-20 00:11 7 1 收藏

下面是个简单易学的CSS教程:expression在Chrome的问题教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

先看一段HTML代码,在下边这段代码中,这张图片的宽度未知,我想写在CSS中写一行限制最大宽度为50px:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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; }

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

但,上边的代码会有一个性能上的问题,性能会非常的差。为什么差,可以看一下之前写过的: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中是不执行的;

#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来跑了。

之后发现是代码中的问题,感谢fireyy 的提示,写成这样就没有问题了,少写了一个括号,但这样不知为什么在IE中没有问题:

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

来源:http://www.tulaoshi.com/n/20160220/1631433.html

延伸阅读
标签: Web开发
IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是...
标签: Web开发
      用过 css 样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 img src="**.jpg" 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?         解决方法: 使用css的 expression 方法,具...
标签: 浏览器
在Firefox中使用Chrome的优秀功能 互联网正因为谷歌浏览器带来的创新特性而兴奋不已,在我们的速度测试中,两者没有明显的差距,因此您的选择可能完全依赖于功能。除了少数特定的功能 (诸如 进程管理),谷歌浏览器的很多优秀特性已经可以在Firefox3上实现,这再次显示了Firefox强大的扩展能力。从隐身浏览、精简的下载管理到网址 高亮和...
      问题说明: 用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="http://img.jcwcn.com/attachment/portal/jcwcj/2005-12/10/05121012370191895.jpg" 如何实现鼠标经过此图片, 图片的src="http://img.jcwcn.com/attachme...
标签: Web开发
首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子,里面提到ie7下出现的文字溢出问题; 于是又重新翻了以前怿飞斑竹的帖子,他提到的是注释引起的文字溢出问题,我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7,所以没有测试),今天看到这个新帖子发现在ie下多了两个猪,至于解决的方法有很多种,发出来大家讨论...

经验教程

509

收藏

70
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部