CSS expression在Chrome的问题

所属分类: 网页制作 / CSS 阅读数: 255
收藏 0 赞 0 分享

先看一段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中是不执行的;

#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)

更多精彩内容其他人还在看

CSS伪类对象before和after的用法实例详解

这两个伪类对象只有在清楚浮动clearfix的时候会用到哈,最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
收藏 0 赞 0 分享

CSS3 实用技巧:实现黑白图像效果示例代码

本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码,感兴趣的朋友可以看下截图,希望对大家有所帮助
收藏 0 赞 0 分享

IE.JS解决IE兼容性问题方法汇总

正如标题所言它修复了许多的HTML和CSS问题,并使得透明PNG在IE5、IE6下正确显示,下面为大家介绍下具体针对不同浏览器的调用方法,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

实现CSS3中的border-radius(边框圆角)示例代码

本文为大家详细介绍下如何实现CSS3中的border-radius(圆角),具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

CSS line-height行高上下居中垂直居中样式属性

我们在css编写中需要对大篇幅的内容显示的更好看,有些间隔,不要在挤在一起难看,就可以使用Line-Height属性进行控制
收藏 0 赞 0 分享

CSS Float布局过程与老生常谈的三栏布局

这篇文章就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上。那就来老生常谈一次吧,CSS之Float布局
收藏 0 赞 0 分享

邮箱css加载失败怎么办 网站css加载异常原因分析

造成css加载失败的原因有很多,脚本之家也遇到过,这可能跟你代码出错,浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
收藏 0 赞 0 分享

CSS控制样式的三种方式(优先级对比验证)

大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,这里简单介绍下CSS控制样式的三种方式
收藏 0 赞 0 分享

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content=
收藏 0 赞 0 分享

Discuz7.2 IE9兼容性写法 杜工完全修补方案

因为Discuz7.2在IE9浏览器中有一系列的问题,所有要在以后的开发中考虑到ie9浏览器的一些问题了,这里简单介绍下,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多