First of all, we know that this effect should be an old topic.
When sorting out files today, I found that some of my previous layout solutions have been lying in the folder for a long time. Let's look through the old ones.
It should be noted that I am fortunate to have seen the old engineer and webmaster of CSSPLAY achieve this effect, and it must have been given it very early.
Less gossip, add 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>
Under <div id=min-width>ie6-, the container realizes the simulation of min-width effect. Please change the browser window size at will, and then click the button to view the width. </div>
</div>
</div>
CSS implementation demonstration:
Run the code box
[Ctrl A All Selection Tips: You can modify some code first, and then press Run]
Extended demo:
Run the code box
[Ctrl A All Selection Tips: You can modify some code first, and 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 fruitlessly.
There are two points that need to be pointed out here:
1. The elements representing the viewport in IE6- are different in standard mode and quirk mode. The former is <html> and the latter is <body>;
2. IE6-In the above two different modes, its different manifestations when the content overflows, resulting in a dead loop in assignment judgment. It's a bit verbose to explain, let's practice it yourself.
CSS Expression implements the 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>
Under <div id=min-width>ie6-, the container realizes the simulation of min-width effect. Please change the browser window size at will, and then click the button to view the width. </div>
Demo:
Run the code box
[Ctrl A All Selection Tips: You can modify some code first, and then press Run]
The above two solutions can be implemented in both IE6-standard mode and quirk mode. IE Expression has not found CPU efficiency problems in this application.