Home > Article > Web Front-end > IE6 does not support min-height. How to solve the height adaptive problem_html/css_WEB-ITnose
IE6 does not support min-height. How to solve the height adaptive problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:371163browse
IE6 does not support min-height. How to solve the problem of height adaptation:
IE6 has many problems, which has brought a lot of troubles to everyone. Here is an introduction because IE6 browser The min-height attribute is not supported, causing the height to be unable to adapt. In other standard browsers, we can use the min-height attribute to specify a minimum height for the container. If the content exceeds this minimum height, the container will be automatically stretched to achieve a height-adaptive effect. However, IE6 browser does not support this attribute. , but IE6 itself has highly adaptive characteristics. Maybe you will think that as long as you use the height and min-height attributes at the same time, you can achieve a highly adaptive effect, for example:
<!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> Judging from the running results, IE6 has achieved a highly adaptive effect, but in other standard browsers, the height of the container is 100px, causing overflow because the min-height attribute is overridden by the height attribute. Then the above CSS code is equivalent to the following code:
width:100px;height:100px;border:1px solid green;
Let’s modify the CSS code as follows:
width:100px;height:auto!important;height:100px;border:1px solid green;
In the code, we added height:auto!important, so that we can achieve the height adaptive effect. However, since the priority of height:auto!important is higher than height:100px, there is no minimum height effect. Modify the code again:
width:100px;height:auto!important;height:100px;min-height:100px;border:1px solid green;
Using the above CSS code can be compatible with the highly adaptive issues of all browsers.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0429/422.html