Detailed explanation of min-height and min-width compatible browser examples in css

I believe everyone is familiar with the two minimum height and minimum width container properties of min-height and min-width.

Let’s talk about min-height first. This one looks easy.

Look at the following interview example:

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

The operation chart is as follows:

Don’t be happy too early, don’t forget IE6.0, which has made you hate it deeply, but has to face it day and night, responds to you like this:

There is no way, who puts it in the pockets of the rich and poor Chinese people? No money? Maybe that shouldn't be said. It should be said that who made our selfless Chinese people contribute their own pockets to the country for free?

We cannot afford to upgrade IE browser. Poor countrymen! ! !

I’m going too far...

The problem must be solved! The poor have their own ways of living.

A phenomenon suddenly pops up in my mind!

Code:

<p style="border:5px solid #f00;height:120px;width:300px;padding:12px;">
    最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度</p>

When giving the container a height, the standard browser handles it like this. If overflow is not set, the content will exceed but the height of the container will not change! At this time, we are back to the previous step. If we want to adapt the height, of course we can remove the height attribute. Sometimes we need a minimum height to occupy a certain space. So the min-height attribute is introduced. But sadly ie6.0 does not support it! !

But when we tested the same code in IE6.0, the result was like this:

It’s really surprising! ! In IE6, when the content exceeds the height, the height actually fails! ! Isn't this exactly what min-height is trying to achieve?

So, we have to use hack (_height:120px) technology for ie6.0. I say "have to" here because I absolutely hate using hacks. You can experience it yourself. My principle is to use hacks as much as possible.

The code is as follows:

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

After testing, the expectations are met.

The road is finally halfway gone. Obviously, we are not satisfied with this. Only an unsatisfied heart can gain more! Don’t be greedy on the road to technology! !

We want min-width to achieve this effect.

Let’s test it first:

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

But the result surprised us, everything failed in all browsers:

How to reply thing? Exam, everyone is on strike! ! After thinking about it carefully, it turns out that this is not how it works. By default, the height of the container is determined by the content, but the width is not! By default, the width of the parent container is inherited. Of course, the premise is that the display is block.

Oh, it turns out that’s the case. We have to let the default width of the container be determined by the content.

From this, I thought of several situations:

1 display:inline But there is a problem that if this is the case, the width will be invalid. After testing, the min-width is also invalid. This situation is I lost my pass, let’s go to the audition! ! ;

2 So we thought of the display:inline-block attribute; Well, this should be no problem! ? Let’s get started

The code is as follows:

<p style="border:5px solid #f00;display:inline-block;min-width:220px;;padding:12px;">
    最小宽度</p>

After testing, it is valid for firefox, chrome and ie8.0.

Damn it, ie6 still doesn’t work! ! And if someone comes out to cause trouble, ie7 will not work either. No, take a closer look. It turns out that ie6 and ie7 do not implement display:inline-block;
Modify the code:

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;;padding:12px;">
    最小宽度</p>

Try ie7 first, ok and you're done! 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. Try putting more content. Will the container become larger as we think if the content exceeds the limit?

Well, it sure is. But there is a small problem, that is, when the content exceeds the width of the browser, it will still wrap. Leave it alone! Solve the problem of ie6.0 first.

After careful consideration, I am now back to my original thinking. Only i6 has a problem. How was it solved in the first place? Oh, the height of ie6.0 itself has the characteristics of min-height. Is the same true for width? Let’s add _width:220px and try

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;">
    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</p>

The result is very serious and we are very disappointed. Our only train of thought has been cut off! What to do? What to do? ....."Line break!!??" Then I will let you not break the line! ! !

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</p>

竟然可以了！加点内容！！！

竟然连上面的，超出浏览器宽度问题也解决了！试试其它浏览器。ie7、ie8、firefox、chrome全部通过。以外收获！

3 position:absolute  嗯这个看起来也行。

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

加些内容：

依然可以，预期达到。

4 float:left 这种情况最常用。应该也行！

上代码：

<p style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度</p>

 

同样加些内容：

预期达到！

我能想到就这几种情况，当然里面有分析不到位的地方，请不吝指正。有些浏览器，没有测，测试完给个结果，不行的话，再想办法。

The above is the detailed content of Detailed explanation of min-height and min-width compatible browser examples in css. For more information, please follow other related articles on the PHP Chinese website!