IE6 implements min-width

First of all, we know that this effect should be an old topic.
When I was organizing files today, I found that some of my previous layout solutions had been lying in folders for a long time. I dug up some old stuff. It should be noted that I was fortunate enough to see the old engineer and webmaster of CSSPLAY implement this effect, and it must have been given very early.
Without further ado, here is the source code:
Trigger and utilize the weird features of IE6-layout, CSS implementation:
<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">Under ie6, the container simulates the min-width effect. Please resize your browser window as desired and click the "View Width" button. </div>
</div>
</div>
CSS implementation demonstration:
Run code box

 ="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> </head> <body> <div class="ie6-out"> <div class="ie6-in"> <div id="min-width">In ie6-, the container realizes the simulated min-width effect. Please resize your browser window as desired and click the "View Width" button. </div> </div> </div> <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> </html>

[Ctrl A Select All Tip: You can modify part of the code first, then press Run]
Extended Demo:
Run code box

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS实现最小宽度</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> </head> <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-下，容器实现模拟min-width效果。 Please resize your browser window as desired and click the "View Width" button. </div> </div> </div> <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> </html>

[Ctrl A Select All Tip: You can modify part of the code first, then press Run]
CSS Expression
——I believe that many people are often troubled by inexplicable crashes when using this method to achieve the minimum width of the container, and often end up in vain.
There are two points that need to be pointed out here:
1. The element representing the viewport in IE6-standard mode and quirk mode is different, the former is <html>, and the latter is <body>;
2. IE6- In the above two different modes, it has different manifestations when the contained content overflows, which leads to an infinite loop in the assignment judgment. This may sound a bit long-winded, so just practice it yourself.
CSS Expression to achieve minimum width source code: <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">Under ie6, the container simulates the min-width effect. Please resize your browser window as desired and click the "View Width" button. </div>
Demo:
Run code box

 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : Please resize your browser window as desired and click the "View Width" button. </div> <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> </html>

[Ctrl A Select All Tip: You can modify part of the code first, then press Run]
The above two solutions can be implemented in both IE6-standard mode and quirk mode. IE Expression also did not find any CPU efficiency issues in this application.

<<: Several ways to change MySQL password

>>: Docker starts Redis and sets the password