IE6不支持min和max-heigt的解决办法

李洋博客
海外宿主机,香港云主机,租用服务器CN2知名云计算-90IDC

温馨提示:这篇文章已超过647天没有更新,请注意相关的内容是否还可用!

先来解决下min-heigt的bug,布局过的人都知道CSS的最小高度min-height是个很有用的属性,它可以让很短的内容也有一个很合适的高度,使页面显得美观。但很可惜IE6不支持这一属性。怎么办呢?我们可以用另外一种方法让IE6也有最小高度min-height属性的效果。

IE6不支持min和max-heigt的解决办法 第1张

众所周知,如果内容超过元素的高度,那么IE6是会自动增加元素的高度,即使你明确的定义了元素的高度。我们可以利用IE6的这个bug来让IE6也有最小高度min-height属性的效果。具体代码如下:

height:auto !important;height:500px;min-height:500px;

解释:

1、由于IE6对!important的解释存在bug,所以它只识别height:500px这一句,超过500px后,IE6自身会增加盒子的高度;

2、IE7和其他标准浏览器三句都能识别,虽然定义height:500px,但我们又有了height:auto !important,所以超过500px也能自动增加盒子的高度。

max-heigt的bug比较麻烦,有2种解决方法,先看jQuery方法:

if($.browser.msie&&($.browser.version === "6.0")){$(".entry").each(Function()
{if($(this)[0].scrollHeight>500)$(this)

CSS解决方法:

.css({"height":"500px","overflow":"hidden"});});}

原理:

在IE6中可以通过设定height来达到max-height的效果. 循环所有要加max-height属性的DOM元素,判断他的scrollHeight大于你要设置的最大高度如果超过了就通过设置height为最大高度,我这里使用的是[0],获取的是的DOM对象,而不是jQuery对象。

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

zblog利用ip地址物理化插件实现评论显示IP归属地的方法

利用 acme.sh 申请 ZeroSSL 泛域名证书的图文教程

zblog响应式极简图片灯箱插件viewimglee,不足1kb的ViewImage.js超效率

Z-BlogPHP侧栏热门文章和热评文章不显示文章怎么解决

开启CDN后怎么防止流量被恶意盗刷

网站预加载 JS 脚本 instant.page 的使用方法

zbp支付宝即时到帐插件显示 count(): Parameter must be an array or an object 错误的解决办法

Windows下安装和部署SVN服务器且同步到Web站点的图文教程

发表评论

表情:
评论列表 (暂无评论,4793人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码