Let IE6 support min-width minimum width_Experience exchange

However, ie6, which has the highest browser usage rate, does not support it, although ie7, which came out later, has begun to support this attribute. However, from the perspective of user experience, multi-browser support is also very important, not to mention that currently IE6 still has the highest share.
Especially when using fluid layout, the attributes min-width, min-height, max-width, and max-height will be used. The following is a very convenient way to display min-width and max-height in IE6. The methods of min-height, max-width, and max-height with the same effect are shared with you here.
Enough chatter, here’s the source code:
Trigger and utilize the weird features of IE6-layout, css implementation:

Copy code The code is as follows:

ie6-under, the container implements the simulated min-width effect. Please resize the browser window as desired and click the button "View Width".

css implementation demonstration:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS implements 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> <div class="ie6-out"> <div class="ie6-in"> <div id="min-width">ie6-under, the container simulates the min-width effect. Please resize the browser window as desired and click the button "View Width". </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">
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]

Extended demo:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS implements 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> <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-under, the container simulates the min-width effect. Please resize the browser window as desired and click the button "View Width". </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">
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]

CSS Expression