╋艺 镇╋╋网站网络|程序语言|Flash╋┣◇网站建设&Web语言 → min-height最小高度的实现(兼容IE6、IE7、FF)


  共有19610人关注过本帖树形打印复制链接

主题:min-height最小高度的实现(兼容IE6、IE7、FF)

美女呀,离线,留言给我吧!
admin
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 司令 亲民勋章
等级:管理员 帖子:3027 积分:27521 威望:0 精华:7 注册:2003/12/30 16:34:32
min-height最小高度的实现(兼容IE6、IE7、FF)  发帖心情 Post By:2011/11/22 16:00:36 [只看该作者]

CSS的兼容性问题一直令CSSer头疼,最小高度min-height是一个非常有用的属性,在页面布局中的很多地方可以用到。在52CSS.com的一些实例布局中也有涉及。

  当容器的内容较少时,能保持一个最小的高度,以免破坏了布局或UI设计效果。而当容器内的内容增加的时候,容器能够自动的伸展以适应内容的变化。
  声明:52CSS.com原创,转载请注意出处并加上链接。

  min-height属性并非所有浏览器都兼容,主要问题还是出现在IE6,这个不支持标准的浏览器偏偏占据很大的用户群体,虽然IE7发布很久了,IE8正式版也快发布了,但IE6依然有着众多的用户。实在让CSSer非常无奈。

  关于可以min-height属性参考这里:http://www.52css.com/css/c_minheight.html

  E6对于overflow的特殊实现,给我们实现min-height提供了一个思路,所以产生了以下兼容IE6、IE7、FF浏览器的min-height写法:

 Example Source Code [www.52css.com]
#mrjin {
    background:#ccc;
    min-height:100px; 
    height:auto !important; 
    height:100px; 
    overflow:visible;
}

  我们查看在内容少时,它在IE6、IE7和FF下的表现:

图片点击可在新窗口打开查看

  我们查看在内容较多时,它在IE6、IE7和FF下的表现:

图片点击可在新窗口打开查看

  我们查看最终的运行效果,您可以编辑内容后再运行,以便查看内容少与内容多时出现的变化。

 Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

  声明:52CSS.com原创,转载请注意出处并加上链接。

http://www.52css.com/article.asp?id=804
[此贴子已经被作者于2011-11-22 16:01:34编辑过]


  
平面设计、网站建设、三维动画、视频制作 联系QQ:114103945  回到顶部