IE6 does not support min-height. How to solve the height adaptive problem_html/css

IE6 does not support min-height. How to solve the height adaptive problem_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:37

Original

1162 people have browsed it

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>

Copy after login

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;

Copy after login

Let’s modify the CSS code as follows:

width:100px;height:auto!important;height:100px;border:1px solid green;

Copy after login

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;

Copy after login

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