最大高度max-height最小高度min-height兼容各浏览器

一个项目中要有这么一个效果:列表默认有一个高度,当超出高度时就出现滚动条.这很简单只需要:给容器的div定义一个高度,然后overflow: auto;
但是这并不是他想要的,还有另外的要求:当列表中的内容没有超出这个高度的时候,它只占有它自身的高度,举个例子:整个列表的最大高度是二行,当内容只有一行时它只显示一行的高度,二行的时候显示两行,当超过二行时就出现滚动条了.

点击查看demo演示

ie7和ff默认是支持max-height,但是ie6、Chrome不支持该写法,如果让让max-height在ie6,Chrome都兼容呢,需要写上height: expression( this.scrollHeight > 60 ? "60px" : "auto" );-webkit-max-height: 60px;

min-height最小高度的实现(兼容IE.hack-max-height6、IE7、FF)

.hack-max-height{ height:auto!important; height:100px; min-height:100px;}注意书写的顺序

发表评论

电子邮件地址不会被公开。 必填项已用*标注