ie6不支持min-height如何解决高度自适应问题:
ie6问题多多，给大家带来了诸多烦恼，这里介绍一下因为ie6浏览器不支持min-height属性，从而导致了高度无法自适应的问题。在其他标准浏览器中，我们可以使用min-height属性给容器规定一个最小高度，如果内容超过这个最小高度，容器会自动被撑开以达到高度自适应效果，但是ie6浏览器并不支持这个属性，不过ie6本身就有高度自适应的特点，或许大家会认为只要同时使用height和min-height属性就可以达到高度自适应效果，例如:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.mytest { width:100px; height:100px; min-height:100px; border:1px solid green;}</style></head><body><div class="mytest">欢迎大家来到蚂蚁部落，希望能够给予有益的建议和意见，在这里再次感谢了！</div></body></html>从运行结果来看IE6达到了高度自适应效果，但是其他标准浏览器中，容器的高度是100px，产生溢出，因为min-height属性被height属性所覆盖。那么上面的CSS代码就相当于以下代码:
width:100px;height:100px;border:1px solid green;
下面我们在修改一下CSS代码如下:
width:100px;height:auto!important;height:100px;border:1px solid green;
代码中我们添加了height:auto!important，这样我们就达到了高度自适应效果，但是由于height:auto!important优先级高于height:100px，所以导致没有了最小高度效果。再次修改代码:
width:100px;height:auto!important;height:100px;min-height:100px;border:1px solid green;
用以上CSS代码就能够兼容所有浏览器的高度自适应问题了。
立即学习“前端免费学习笔记（深入）”；
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0429/422.html
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
878
收藏
