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

Summary of some of my frequently used Linux commands

IE6 implements min-width

Summary of some of my frequently used Linux commands

WeChat applet uses canvas to draw clocks

Docker+nacos+seata1.3.0 installation and usage configuration tutorial

Tutorial on installing and using virtualenv in Deepin

Detailed introduction to Mysql date query

Summary of common problems and solutions in Vue (recommended)

Best Practices for Developing Amap Applications with Vue

Detailed explanation of loop usage in javascript examples

How to query data from multiple unrelated tables and paging in Mysql

How to implement second-level scheduled tasks with Linux Crontab Shell script

Recommend

Solve the problem of MySQL server actively disconnecting when there is no operation timeout

Summary of ten Linux command aliases that can improve efficiency

The MySQL server is running with the --read-only option so it cannot execute this statement

Detailed explanation of the middleman mode of Angular components

Detailed explanation of MySQL deadlock and database and table sharding issues

The advantages and disadvantages of nginx and lvs and their suitable usage environment

js implements random roll call

Detailed explanation of MySQL 5.7.9 shutdown syntax example

A simple example of creating a thin line table in html

Detailed explanation of chmod command usage in Linux

W3C Tutorial (1): Understanding W3C

How to solve the error of connecting to the database when ServerManager starts

How to implement import and export mysql database commands under linux

Detailed installation process of MySQL 8.0 Windows zip package version

Detailed process of installing various software in Docker under Windows