Ausführliche Erläuterung der mit Min-Height und Min-Width kompatiblen Browserbeispiele in CSS

Ich glaube, jeder kennt die beiden Containerattribute Mindesthöhe und Mindestbreite, Mindesthöhe und Mindestbreite.

Lass uns zuerst über die Mindesthöhe sprechen. Das hier sieht einfach aus.

Sehen Sie sich das folgende Beispiel an:

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

Das Operationsdiagramm lautet wie folgt:

Sei nicht so Zu früh glücklich, vergiss nicht ie6.0, das dich zutiefst hassen lässt, aber du musst dich Tag und Nacht damit auseinandersetzen. Es reagiert so auf dich:

Es gibt keine Möglichkeit, wer das Land reich und die Menschen arm macht? Kein Geld in der Tasche? Vielleicht sollte es nicht gesagt werden. Es sollte gesagt werden: Wer hat unser selbstloses chinesisches Volk dazu gebracht, kostenlos seine eigene Tasche in das Land einzubringen?

Wir können es uns nicht leisten, den IE-Browser zu aktualisieren. Arme Chinesen! ! !

Das ist zu weit vom Thema entfernt...

Das Problem muss gelöst werden! Die Armen haben ihre eigene Lebensweise.

Ein Phänomen taucht plötzlich in meinem Kopf auf!

Code:

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

Wenn dem Container eine Höhe zugewiesen wird, geht der Standardbrowser folgendermaßen damit um. Wenn kein Überlauf festgelegt ist, wird der Inhalt berücksichtigt wird überschritten, aber die Höhe des Behälters ändert sich nicht! Zu diesem Zeitpunkt kehren wir zum vorherigen Schritt zurück. Wenn wir die Höhe anpassen möchten, können wir das Höhenattribut natürlich entfernen. Manchmal benötigen wir eine Mindesthöhe, um einen bestimmten Raum einzunehmen. Daher wird das Attribut „min-height“ eingeführt. Aber leider unterstützt ie6.0 es nicht! !

Aber als wir den gleichen Code in IE6.0 getestet haben, war das Ergebnis dieses:

Was für eine Überraschung! ! Wenn in IE6 der Inhalt die Höhe überschreitet, schlägt die Höhe tatsächlich fehl! ! Ist das nicht genau das, was min-height erreichen will?

Also müssen wir die Hack-(_height:120px)-Technologie für ie6.0 verwenden. Ich sage hier „müssen“, weil ich es absolut hasse, Hacks zu verwenden. Sie können es selbst erleben. Mein Prinzip ist, so oft wie möglich Hacks zu verwenden.

Der Code lautet wie folgt:

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

Nach dem Test erfüllt er die Erwartungen.

Wir haben endlich die Hälfte der Reise hinter uns gebracht. Offensichtlich sind wir damit nicht zufrieden. Seien Sie nicht gierig auf dem Weg zur Technologie! !

Wir möchten, dass die Mindestbreite diesen Effekt erzielt.

Lass es uns zuerst testen:

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

Aber das Ergebnis hat uns überrascht, es funktionierte nicht in allen Browsern:

Was ist los? Prüfung, alle streiken! ! Nach sorgfältiger Überlegung stellt sich heraus, dass es nicht so funktioniert. Standardmäßig wird die Höhe des Containers durch den Inhalt bestimmt, die Breite jedoch nicht! Standardmäßig wird die Breite des übergeordneten Containers übernommen. Voraussetzung ist natürlich, dass die Anzeige blockiert ist.

Oh, das ist passiert, wir müssen die Standardbreite des Containers durch den Inhalt bestimmen lassen.

Aus diesem Grund habe ich an mehrere Situationen gedacht:

1 display:inline Aber es gibt ein Problem, dass in diesem Fall die Breite ungültig ist. Nach dem Testen ist die Mindestbreite ungültig ist auch ungültig. Ich habe meinen Pass verloren, lass uns zum Vorsprechen gehen! ! ;

2 Also haben wir uns das display:inline-block-Attribut ausgedacht. Nun, damit sollte es kein Problem geben! ? Machen wir es

Der Code lautet wie folgt:

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

Nach dem Test ist er für Firefox, Chrome und ie8.0 gültig.

Verdammt, ie6 funktioniert immer noch nicht! ! Und wenn jemand herauskommt, um Ärger zu machen, wird ie7 auch nicht funktionieren. Nein, schauen Sie genauer hin, es stellt sich heraus, dass ie6 und ie7 display:inline-block; nicht implementieren.
Ändern Sie den Code:

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

Versuchen Sie es zuerst mit ie7, ok, Sie sind fertig! Versuchen Sie es erneut mit ie6, immer noch „böse“! ! Keine Sorge, zumindest verstehen wir die Verwendung von min-width, was nur funktioniert, wenn die Breite durch den Inhalt bestimmt wird. Versuchen Sie, mehr Inhalt einzufüllen. Wird der Container größer, als wir denken, wenn der Inhalt das Limit überschreitet?

Nun, das ist es auf jeden Fall. Es gibt jedoch ein kleines Problem: Wenn der Inhalt die Breite des Browsers überschreitet, wird er trotzdem umbrochen. Lass es in Ruhe! Lösen Sie zuerst das Problem von ie6.0.

Nachdem ich sorgfältig darüber nachgedacht habe, bin ich jetzt wieder bei meiner ursprünglichen Meinung. Nur der i6 hat ein Problem. Wie wurde es überhaupt gelöst? Oh, die Höhe von ie6.0 selbst hat die Eigenschaften einer Mindesthöhe. Gilt das auch für die Breite? Versuchen wir, _width:220px

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

hinzuzufügen. Das Ergebnis ist ernst und wir sind sehr enttäuscht. Unser einziger Gedankengang wurde unterbrochen! Was zu tun? Was zu tun? ....."Zeilenumbruch!!??" Dann werde ich zulassen, dass du die Zeile nicht unterbrichst! ! !

<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>

 

同样加些内容：

预期达到！

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der mit Min-Height und Min-Width kompatiblen Browserbeispiele in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!