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

How to use iostat to view Linux hard disk IO performance

IE6 implements min-width

How to use iostat to view Linux hard disk IO performance

Super detailed steps to install zabbix3.0 on centos7

Vue implements the sample code of associating the side navigation bar with the Tab page

Summary of Linux sftp command usage

How to smoothly go online after MySQL table partitioning

A complete record of the process of building mobile applications using Vue Native

Details on how to write react in a vue project

Specific use of Mysql prepare preprocessing

In-depth understanding of CSS @font-face performance optimization

How to quickly insert 10 million records into MySQL

Recommend

Detailed explanation of the difference between run/cmd/entrypoint in docker

Solution to the problem that the virtualbox virtual machine cannot connect to the external network in NAT mode

MySQL full-text fuzzy search MATCH AGAINST method example

Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5

How to adapt CSS to iPhone full screen

Teach you a trick to permanently solve the problem of MySQL inserting Chinese characters

Methods and techniques for designing an interesting website (picture)

HTML6 implements folding menu and accordion menu example code

Page Refactoring Skills - Content

How to use the yum command

MySQL 5.7.13 installation and configuration method graphic tutorial on Mac

Solution to win10 without Hyper-V

Basic application methods of javascript embedded and external links

Web2.0: Causes and Solutions of Information Overload