Compatible with Min-width and max-width of IE6 and IE7

Warning: cherish life and stay away from IE

Most of the time, we want to set the minimum or maximum width of the container, but IE6 does not support the Min-width and max-width attributes. What should I do?

Don't worry. Coming with me will make you more anxious.

First, let's see how the standard attributes Min-width and max-width work:

.ie-hack {    min-width: 100px;    max-width: 200px;}

<div class="ie-hack">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL</div><div class="ie-hack">s</div>

(Figure 1-1 normal browser)

(Figure 1-2 IE6)

Not the expected result.

Oh, it turns out to be the reason for block. Use inline-block:

.ie-hack {    min-width: 100px;    max-width: 200px;    display: inline-block;}

<span class="ie-hack">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL</span><br><span class="ie-hack">s</span>

(Figure 2-1 normal browser)

(Figure 2-2 IE6)

Oh, the Width limit of the normal browser is implemented. Now let's solve the problem of IE6.

Here, only IE6 is used to recognize the _ width attribute, and expression expressions are used to dynamically set the attribute value:

.ie-hack {    min-width: 100px;    max-width: 200px;    display: inline-block;    _width: expression(this.offsetWidth < 100 ? ‘100px‘ : (this.offsetWidth < 200 ? ‘auto‘ : ‘200px‘));}

Refresh the page

Haha, Congratulations! You're in trouble. IE6 is stuck.

Don't ask me, I don't know why, but I know the solution, that is, to change the first minor sign to a minor sign:

_width: expression(this.offsetWidth > 100 ? (this.offsetWidth < 200 ? ‘auto‘ : ‘200px‘) : ‘100px‘);

Okay, this time it won't get stuck. Let's see how it works:

(Figure 3 IE6)

The minimum width is available, but the maximum width is not limited.

This is because there is too much content and it is automatically stretched. After all, it is not Max-width.

Let's take a look at the excess content:

.ie-hack {    min-width: 100px;    max-width: 200px;    display: inline-block;    _width: expression(this.offsetWidth > 100 ? (this.offsetWidth < 200 ? ‘auto‘ : ‘200px‘) : ‘100px‘);    overflow: hidden;}

(Figure 4 IE6)

OK.

So far, do you think the problem has been solved?

Young man, pattern is broken. Can you solve ie easily?

Let's take a look at the problem. This time we use the button to see how it works:

<input class="ie-hack" type="button" value="LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL" /><br><input class="ie-hack" type="button" value="s" />

(Figure 5-1 normal browser & IE6)

(Figure 5-2 IE7)

Oh, no! This time IE6 passed, but IE7 was used to torture you (it was really a torment, but it was a tear to say too much .)

Why?

It seems that in IE7, Min-width is set as width. The solution is hack:

.ie-hack {    min-width: 100px;    max-width: 200px;    *+min-width: auto;    *+width: expression(this.offsetWidth > 100 ? (this.offsetWidth < 200 ? ‘auto‘ : ‘200px‘) : ‘100px‘);    _width: expression(this.offsetWidth > 100 ? (this.offsetWidth < 200 ? ‘auto‘ : ‘200px‘) : ‘100px‘);    overflow: hidden;}

(Figure 7 IE7)

Thank God! Finally, we can celebrate with champagne!

Wait, young man, said you are too young to believe

If I don't remind you, you don't know how to die when you die.

This time, we use js to dynamically change the control content to see if the width of the control changes accordingly.

<span class="ie-hack" id="span1">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL</span><br><span class="ie-hack" id="span2">s</span><br><input class="ie-hack" id="btn1" type="button" value="LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL" /><br><input class="ie-hack" id="btn2" type="button" value="s" />

window.onload = function() {    document.getElementById("span1").innerHTML = "s";    document.getElementById("span2").innerHTML = "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL";    document.getElementById("btn1").value = "s";    document.getElementById("btn2").value = "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL";};

(Figure 8-1 normal browser)

(Figure 8-2 IE6 & IE7)

The effect we thought of should be the same as Figure 8-1, but this time IE6 and IE7 joined hands to torture you.

Crazy, streaking, next time breaking down

(To be resolved)