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.