CSS examples of min-height and Min-width compatible browsers

Min-height and Min-width These two container properties of minimum height and minimum width are not unfamiliar to you.

First talk about Min-height. This looks very easy.

Look at the interview example:

<p style= "border:5px solid #f00; min-height:200px;width:300px;padding:12px;" >    min. height </p>

The operation diagram is as follows:

Do not be happy too early, do not forget to have let you hate, but also have to ie6.0 the relative, it is such a response to you:

No way, who let the country rich and poor people have no money in their pockets? Perhaps it should not be said. It should be said who let our selfless countrymen, their own pockets of unpaid contribution to the country?

We can't upgrade IE browser. Hard-pressed countrymen!!!

It's far away ...

The problem always has to be solved! The poor have the living of the poor.

The brain suddenly emerges a phenomenon!

Code:

<p style= "border:5px solid #f00; height:120px;width:300px;padding:12px;" >    Minimum height minimum height minimum height min height min height minimum height min altitude minimum height smallest altitude minimum altitude minimum altitude minimum altitude minimum height minimum height minimum height minimum height min height min height min height minimum height minimum height min altitude minimum altitude min altitude smallest height minimum height min. Min Height Minimum height min height minimum height minimum height </p>

When the container is given a height, the standard browser is such processing, if not set overflow, the content will exceed but the height of the container will not change! At this time, we went back to the front, if you want to self-adaptive height, of course, remove the height attribute. Sometimes we need a minimum height to occupy a certain space. So the Min-height attribute is drawn. But sadly, ie6.0 does not support it!!

But the same code we tested in ie6.0 was the result:

What a surprise!! In the IE6 inside, the content exceeds the height high, when the height unexpectedly fails!! Isn't that what Min-height is trying to achieve?

Thus, we have to use Hack (_height:120px) technology for ie6.0. Here I say "I have to" because I am extremely disgusted with hack. The taste of their own experience, my principle is, can not use hack as far as possible.

The code is as follows:

<p style= "border:5px solid #f00; min-height:120px;_height:120px;width:300px;padding:12px;" >    min. height </p>

Tested and expected to reach.

Road finally is half gone, obviously, we are not satisfied with this, an unsatisfied heart can harvest more! On the road of technology is not greedy some!!

We want min-width to achieve this effect.

Let's test it first:

<p style= "border:5px solid #f00; min-width:120px; padding:12px; " >    min Width </p>

But it turned out to be an accident, and all browsers failed:

What's going on? Test, all Strike!! Carefully pondering, it is not so play. The height of the container is determined by the content by default, but the width is not ah! By default, the width of the parent container is inherited. Of course, the premise is that display is block.

Oh, so that's the case, we have to let the container's default width is the content of how much to decide.

In this way I think of several situations:

1 Display:inline But there is a problem is that the width of the failure, the test min-width also failed, this situation was pass off, audition AH!! ；

2 So we think of the display:inline-block attribute; Well, this should be OK!? Do it

The code is as follows:

<p style= "border:5px solid #f00;d isplay:inline-block;min-width:220px; padding:12px; " >    min Width </p>

After testing, Firefox, Chrome, ie8.0 are all valid.

But the IE6 of evil is still not good!! And come out a troublemaker, IE7 also not. Don't, look carefully, originally IE6 and IE7 did not realize display:inline-block;
To modify the code:

<p style= "border:5px solid #f00;d isplay:inline-block;*display:inline;zoom:1;min-width:220px; padding:12px; " >    min Width </p>

Try Ie7,ok First! Try IE6 again, still "evil"!! Don't worry, at least we understand the usage of min-width, which only works when the width is determined by the content. Put more content to try, is not as we think the content beyond, the container becomes larger?

Well, it sure is. But there is a small problem, that is, when the content exceeds the width of the browser, the line will still be wrapped. Whatever it is! Solve the ie6.0 problem first.

Carefully pondering, now back to the original idea, only I6 have problems. How did that work out? Oh, the height of ie6.0 itself has min-height characteristics. Is that width also true? Let's try adding a _width:220px .

<p style= "border:5px solid #f00;d isplay:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px; padding:12px; " > Minimum width minimum width min width min width minimum width min Breadth minimum width minimum width minimum width minimum breadth min Width minimum width minimum width min Breadth min Wide minimum widths minimum width minimum width    </p>

The result was very serious and we were disappointed. Our only train of thought has been cut off! Kind of? Kind of? ... "New line!!? "Then I'll let you not change!!!"

<p style= "border:5px solid #f00;d isplay:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px; Padding:12px;white-space:nowrap "> Min width minimum width min. width min. width minimum width min. width min Width minimum width min breadth minimum width min. width min breadth minimum width min. min. width min. Width Minimum breadth    </p>

I can do it! Add content!!!

Even above, beyond the browser width problem also solved! Try another browser. IE7, IE8, Firefox, Chrome all passed. Harvest Outside!

3 Position:absolute Well, this looks fine, too.

<p style= "border:5px solid #f00;p Osition:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap ">    min width </p>

Add some content:

Still can, expected to reach.

4 Float:left This situation is most commonly used. It should be OK!

On the code:

<p style= "border:5px solid #f00; Float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap" >    Minimum width </p>

Also add some content:

Expected to reach!

I can think of these kinds of situations, of course, there is a place where analysis is not in place, please do not hesitate to correct me. Some browsers, no test, after testing to give a result, if not, then think of ways.