Heim > Artikel > Web-Frontend > IE6不支持min-height如何解决高度自适应问题_html/css_WEB-ITnose
IE6不支持min-height如何解决高度自适应问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:371123Durchsuche
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：解决IE6下无法设置滚动条颜色Nächster Artikel：IE6浏览器下3px解决方法_html/css_WEB-ITnose