Let IE6 support Min-width minimum width _ Experience Exchange

Source: Internet
Author: User

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]

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.