The IE6, which has the highest browser usage, is not supported, although later IE7 has already started supporting this property. However, in terms of user experience, multi-browser support is also important, not to mention that at present, IE6 's share is the highest.
Especially in the use of mobile layouts, especially the use of Min-width, Min-height, Max-width, max-height These properties, the following is a very convenient to achieve in the IE6 display min-width, Min-height, Max-width, max-height the same effect of the method, here with you to share.
Less gossip, on the source:
Triggers and exploits Ie6-layout's bizarre features, CSS implementations:
Copy Code code as follows:
<style type= "Text/css" >
. ie6-out{
_margin-left:900px;
_zoom:1;
}
. ie6-in{
_position:relative;
_float:left;
_margin-left:-900px;
}
#min-width{
min-width:900px;
Background: #ccc;
line-height:200px;
_zoom:1;
}
</style>
<div class= "Ie6-out" >
<div class= "Ie6-in" >
<div id= "Min-width" >ie6-, the container realizes the simulation min-width effect. Please arbitrarily change the browser window size, and then click the button "view width." </div>
</div>
</div>
CSS Implementation Demo:
<textarea id="runcode43114"><ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" text /html; charset=gb2312 "/> <title>css Implementation minimum width </title> <style type=" Text/css "> body{text-align:center;} . ie6-out{_margin-left:900px; _zoom:1; }. ie6-in{_position:relative; _float:left; _margin-left:-900px; } #min-width{min-width:900px; Background: #ccc; line-height:200px; _zoom:1; </style> </pead> <body> <div class= "Ie6-out" > <div class= "ie6-in" > <div id= "min-w Idth ">ie6-, the container realizes the simulation min-width effect. Please arbitrarily change the browser window size, and then click the button "view width." </div> </div> </div> <input name= "type=" button "onclick=" Alert (' container width = ' + document.getElementById (' Min-width '). clientwidth+ ' px ' + ' \ n = ' + ' viewport width = ' + (document.documentelement.clientwidth| | document.body.clientWidth) + ' px '); "value= view width"/> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Extended Demo:
<ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content= "text/" html charset=gb2312 "/> <title>css Implementation minimum width </title> <style type=" Text/css "> body{text-align:center;} . ie6-out{_margin-left:900px; _zoom:1; }. ie6-in{_position:relative; _float:left; _margin-left:-900px; Background: #f00; line-height:200px; } #min-width{min-width:900px; Background: #ccc; _zoom:1; </style> </pead> <body> <div class= "Ie6-out" > <div class= "ie6-in" > AA </div> </div> <div class= "Ie6-out" > <div class= "ie6-in" > Aa<div id= "min-width" >ie6-, The container realizes the simulation min-width effect. Please arbitrarily change the browser window size, and then click the button "view width." </div> </div> </div> <input name= "type=" button "onclick=" Alert (' container width = ' + document.getElementById (' Min-width '). clientwidth+ ' px ' + ' \ n = ' + ' viewport width = ' + (document.documentelement.clientwidth| | document.body.clientWidth) + ' px '); "Value= view width"/> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
CSS Expression
--I believe many people in this way to achieve the minimum width of the container is often confused by the crash, and finally often fruitless.
In particular, here are two points to note:
1. In the standard mode of ie6-and quirk mode, the elements representing the viewport are different, the former is 2. ie6-in the above two different modes, it contains the content overflow of different manifestations, resulting in the evaluation of the death cycle. Explain a bit wordy, practice it yourself.
CSS expression to achieve the minimum width of the source code:
Copy Code code as follows:
<style type= "Text/css" >
body{Text-align:center;}
#min-width{
min-width:900px;
_width:expression (document.documentelement.clientwidth| | document.body.clientWidth) <900? " 900px ":" ");
line-height:200px;
Background: #ccc;
}
</style>
<div id= "Min-width" >ie6-, the container realizes the simulation min-width effect. Please arbitrarily change the browser window size, and then click the button "view width." </div>
Demonstrate:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>css expression Achieve minimum width </title> <style type=" Text/css "> body{text-align: Center;} #min-width{min-width:900px; _width:expression (document.documentelement.clientwidth| | document.body.clientWidth) <900? " 900px ":" "); line-height:200px; Background: #ccc; _zoom:/* Trigger layout to view clientwidth, can omit/} </style> </pead> <body> <div id= "Min-width" >ie6- , the container realizes the simulation min-width effect. Please arbitrarily change the browser window size, and then click the button "view width." </div> <input name= "type=" button "onclick=" Alert (' container width = ' +document.getelementbyid '). clientwidth+ ' px ' + ' \ n ' = ' + ' viewport width = ' + (document.documentelement.clientwidth| | document.body.clientWidth) + ' px '); "value=" View width/> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Both of the above solutions can be implemented in standard mode and quirk mode of ie6-, IE expression has not found CPU efficiency problem in this application.
The IE6, which has the highest browser usage, is not supported, although later IE7 has already started supporting this property. However, in terms of user experience, multi-browser support is also important, not to mention that at present, IE6 's share is the highest.
Especially in the use of mobile layouts, especially the use of Min-width, Min-height, Max-width, max-height These properties, the following is a very convenient to achieve in the IE6 display min-width, Min-height, Max-width, max-height the same effect of the method, here with you to share.
min-width:700px;
Width:expression (Documentelement.clientwidth < 700)? "700px": "Auto");
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Cloud Habitat Community www.jb51.net</title> <style type=" Text/css "> <!--*{padding:0; margin:0; } body{min-width:700px; Width:expression (Documentelement.clientwidth < 700)? "700px": "Auto"); --> </style> </pead> <body> Zoom out to see the browser! </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
