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:
Run Code Box
<ptml xmlns= "http://www.jb51.net/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-, container Realize 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.getelementbyi D (' 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.
