背景

Nivo Slider模块默认大小是用的height: 100%, width 100%，

但IE7及下面的浏览器是不支持百分比宽高的，

而我的项目目标用户基本都是使用XP系统，项目需求是必须兼容IE7。

因此须要对其CSS改动成绝对像素大小。

问题

改动之后却出现了问题，由于用户上传的图片长宽比是不一样的，

指望用户每次上传的时候先用PS裁剪一下明显不现实，

于是我在CSS里将其拉伸了。这样就不会导致图片仅仅显示一部分。

.block-nivo-slider img {  width: 450px;  height: 250px;}

可是，Nivo Slider在每次幻灯片切换前图片都会变成未拉伸的状态。

幻灯片切换的时候就会感觉图片在“跳动”。

探究

明明已经写死了img的宽高，为什么切换前会变回来呢？

初步断定是由于Nivo Slider模块在控制切换的JS里有改变图片的宽高。

翻了一下Nivo Slider模块的JS，发现是压缩过的，改起来比較麻烦。

于是又祭出万能的CSS大法了！

- -！

解决

细致分析后，发现JS是在改变img元素的height属性

我们能够用min-height和max-height属性让height的改变无效：

.block-nivo-slider img {  width: 450px;  max-height: 250px;  min-height: 250px;}

问题解决！

本文首发。转载请注明。