IE6不支持min-height如何解决高度自适应问题_html/css_WEB-ITnose
程序员文章站
2022-04-09 19:10:02
...
IE6不支持min-height如何解决高度自适应问题:
IE6问题多多,给大家带来了诸多烦恼,这里介绍一下因为IE6浏览器不支持min-height属性,从而导致了高度无法自适应的问题。在其他标准浏览器中,我们可以使用min-height属性给容器规定一个最小高度,如果内容超过这个最小高度,容器会自动被撑开以达到高度自适应效果,但是IE6浏览器并不支持这个属性,不过IE6本身就有高度自适应的特点,或许大家会认为只要同时使用height和min-height属性就可以达到高度自适应效果,例如:
IE6问题多多,给大家带来了诸多烦恼,这里介绍一下因为IE6浏览器不支持min-height属性,从而导致了高度无法自适应的问题。在其他标准浏览器中,我们可以使用min-height属性给容器规定一个最小高度,如果内容超过这个最小高度,容器会自动被撑开以达到高度自适应效果,但是IE6浏览器并不支持这个属性,不过IE6本身就有高度自适应的特点,或许大家会认为只要同时使用height和min-height属性就可以达到高度自适应效果,例如:
蚂蚁部落 欢迎大家来到蚂蚁部落,希望能够给予有益的建议和意见,在这里再次感谢了!
从运行结果来看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
推荐阅读
-
如何解决PC端和移动端自适应问题?_html/css_WEB-ITnose
-
IE6不支持min-height或max-width等完美解决方法_html/css_WEB-ITnose
-
min-height最小高度的实现(兼容IE6、IE7、FF)(解决IE6不兼容min-height)_html/css_WEB-ITnose
-
IE6不支持min-height如何解决高度自适应问题_html/css_WEB-ITnose
-
如何解决IE6,7,8不支持before:after伪元素_html/css_WEB-ITnose
-
IE6不支持min-height或max-width等完美解决方法_html/css_WEB-ITnose
-
CSS的经典问题二:如何解决所有子元素浮动以后,父元素高度为0的问题?_html/css_WEB-ITnose
-
min-height最小高度的实现(兼容IE6、IE7、FF)(解决IE6不兼容min-height)_html/css_WEB-ITnose
-
IE6不支持min-height或max-width等完美解决方法_html/css_WEB-ITnose
-
CSS的经典问题二:如何解决所有子元素浮动以后,父元素高度为0的问题?_html/css_WEB-ITnose