The IE6 with the highest browser usage is not supported, although later appearances of IE7 have begun to support this attribute. However, in terms of user experience, multi-browser support is also very important, not to mention the current IE6 share is the highest.
Especially in the use of mobile layout, especially to use the Min-width, Min-height, max-width, max-height These attributes, the following is a very convenient to achieve in IE6 display min-width, Min-height, Max-width, Max-height the same effect method, here with you to share.
Gossip less said, on the source:
Trigger and take advantage of Ie6-layout's bizarre features, CSS implementations:
Copy CodeThe code is as follows:
ie6-, the container realizes the simulated min-width effect. Please change the browser window size, then click the button "view width".
CSS Implementation Demo:
<textarea id="runcode17538"><ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content= "text /html; charset=gb2312 "/> <title>css Achieve 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> ie6-, the container implements a simulated min-width effect. Please change the browser window size, then click the button "view width". <input name= "" type= "button" onclick= "Alert (' container width = ' +document.getelementbyid (' min-width '). clientwidth+ ' px ' + ' \n\ N ' + ' viewport width = ' + (document.documentelement.clientwidth| | document.body.clientWidth) + ' px '); "value=" View width "/> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Extended Demo:
<textarea id="runcode9252"><ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content= "text /html; charset=gb2312 "/> <title>css Achieve 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> aa aaie6-, the container implements the simulated min-width effect. Please change the browser window size, then click the button "view width". <input name= "" type= "button" onclick= "Alert (' container width = ' +document.getelementbyid (' min-width '). clientwidth+ ' px ' + ' \n\ N ' + ' viewport width = ' + (document.documentelement.clientwidth| | document.body.clientWidth) + ' px '); "value=" View width "/> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
CSS Expression
--believe that many people in this way to achieve the minimum width of the container is often confused by the crash of confusion, and finally often fruitless.
In particular, there are two points to note:
1. The ie6-standard mode and the quirk mode represent the element of the viewport is different, the former is, while the latter is；
2. ie6-in the above two different modes, it contains the content overflow when the different manifestations, resulting in the judgment of the value of the dead loop. It's a bit verbose to explain, practice it yourself.
CSS expression implements the minimum width source code:
Copy CodeThe code is as follows:
ie6-, the container realizes the simulated min-width effect. Please change the browser window size, then click the button "view width".
Demonstrate:
<textarea id="runcode87225"><! 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 for 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, omit */} </style> </pead> <body> ie6-, the container can simulate the min-width effect. Please change the browser window size, then click the button "view width". <input name= "" type= "button" onclick= "Alert (' container width = ' +document.getelementbyid (' min-width '). clientwidth+ ' px ' + ' \n\ N ' + ' viewport width = ' + (document.documentelement.clientwidth| | document.body.clientWidth) + ' px '); "value=" View width "/> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Both of these solutions can be implemented in both the standard and quirk modes of ie6-, and IE expression does not find any CPU efficiency problems in this application.
The IE6 with the highest browser usage is not supported, although later appearances of IE7 have begun to support this attribute. However, in terms of user experience, multi-browser support is also very important, not to mention the current IE6 share is the highest.
Especially in the use of mobile layout, especially to use the Min-width, Min-height, max-width, max-height These attributes, the following is a very convenient to achieve in IE6 display min-width, Min-height, Max-width, Max-height the same effect method, here with you to share.
min-width:700px;
Width:expression ((Documentelement.clientwidth < 700)? "700px": "Auto");
<textarea id="runcode26746"><! 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> scripting House 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 the browser! </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
