Ie6 does not support css max-heigth max height solution set

Source: Internet
Author: User

The main method is the css hack method, which uses symbols supported or not supported by ie6 to complete the task.

You may think of the expression I mentioned earlier and calculate the height of the container in css.

Yes, this can meet our requirements. The code is as follows:

The code is as follows: Copy code

Overflow: auto;/* Display the scroll bar when the part is exceeded */
_ Height: expression (
This. scrollHeight <100? "100px ":
(This. scrollHeight> 200? "200px": "auto ");


What I mentioned above is that ie6 implements it. Read the code.

The code is as follows: Copy code

<Style type = "text/css">
. Contain {height: 200px; overflow: auto; background: # eee ;}
. Post {_ height: 100px; min-height: 100px; background: # ccc ;}
</Style>
<Div class = "contain">
<Div class = "post">
Today, I encountered the min-height problem. I just recorded it here. I like Lenovo, so here I made up ie6's support for max-height and ie6's support for min-height and max-height at the same time.
</Div>
</Div>


I plan to use the max-height label that comes with css, but Firefox supports writing at the maximum height, whereas ie6 and Chrome do not support writing at the same time, causing me to immediately rewrite css bugs on the Internet. Finally, find a line of code, but write the code with the maximum width:

The code is as follows: Copy code

. A {width: expression (this. clientWidth> 950? "950px": "auto ");}

After I changed it to height, another problem occurred. After a long time, it turned out that my this. Code was wrong. Dizzy, correct code writing at the maximum height:

The code is as follows: Copy code

. A {overflow: auto; max-height: 84px; height: expression_r (this. scrollHeight> 83? "84px": "auto ");}

In this way, ie6, ie7, and ff can achieve the desired effect, but Google Chrome does not support this method. So I went to the Internet to find the Chrome bug. You can use webkit to solve Chrome bugs. Therefore, the modified statement is as follows:

The code is as follows: Copy code

. A ul {overflow: auto; max-height: 84px;-webkit-max-height: 84px; height: expression_r (this. scrollHeight> 83? "84px": "auto ");}

My html code is as follows: switch090405_cont2 is the div's Appearance Setting

The code is as follows: Copy code

<Div class = "switch090405_cont2 a">
<Ul>
<Li> list content </li>
<Li> list content </li>
<Li> list content </li>
<Li> list content </li>
</Ul>
</Div>

----------------------------------------------------------

The code is as follows: Copy code

# Test {min-height: 100px; background: # BBB; _ height: 100px; overflow: visible ;}

# Page {

Background: # F00;

Min-height: 500px;
Height: auto! Important;
Height: 500px;

Overflow: visible;

}

This overflow: visible enables IE to handle the problem as height: auto.

Jquery implementation method

The above code has not been judged by IE6. The complete code is as follows:

The code is as follows: Copy code
If ($. browser. msie & amp;
($. Browser. version === "6.0 ")){
$ (". Entry"). each (function (){
If ($ (this) [0]. scrollHeight> 500)
Watermark (this).css ({"height": "500px", "overflow": "hidden "});
});}

Of course, you can also use css expressions to implement IE6 support the max-height attribute.

The code is as follows: Copy code

. Entry {

Height: expression (this. scrollHeight> 500? "500px": "auto ");

/* Sets max-height for IE */
}

The following describes how to implement min-height.
Method 1:

The code is as follows: Copy code

<Style type = "text/css">
. Show {background: # ccc; min-height: 100px; _ height: 100px ;}
</Style>
<Div class = "show"> niumo's world view test Yu's words! </Div>

Method 2:

The code is as follows: Copy code

<Style type = "text/css">
. Show {background: # ccc; height: auto! Important; height: 100px; min-height: 100px ;}
</Style>
<Div> The World View test of the Lord of the ox! </Div>

The last common method is


1. IE6 does not recognize max-height: 500px and height: auto! Important, the content above px (that is, the maximum height we want) will be automatically hidden;

However, I recommend this method, which will affect the appearance of the website.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.