先看一段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,expression
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]