Explication détaillée des exemples de navigateurs compatibles avec la hauteur minimale et la largeur minimale en CSS

Je pense que tout le monde connaît les deux attributs du conteneur : hauteur minimale et largeur minimale, hauteur minimale et largeur minimale.

Parlons d'abord de la hauteur minimale. Celui-ci a l’air facile.

Regardez l'échantillon suivant :

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

Le tableau des opérations est le suivant :

Ne soyez pas heureux trop tôt, n'oubliez pas ie6.0, qui vous a fait le détester profondément, mais vous devez y faire face jour et nuit. Il vous répond comme ceci :

.

Il n'y a aucun moyen, qui rend le pays riche et les gens pauvres ? Il ne faudrait peut-être pas dire cela. Il faut dire : qui a poussé notre peuple chinois altruiste à contribuer gratuitement au pays de ses propres poches ?

Nous ne pouvons pas nous permettre de mettre à niveau le navigateur IE. Pauvre peuple chinois ! ! !

C'est trop loin du sujet...

Il faut résoudre le problème ! Les pauvres ont leur propre mode de vie.

Un phénomène surgit soudain dans mon esprit !

Code :

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

Lorsque vous attribuez une hauteur au conteneur, voici comment le navigateur standard le gère. Si le débordement n'est pas défini, le contenu. dépassera mais la hauteur du conteneur ne changera pas ! A ce stade, nous revenons à l'étape précédente. Si nous souhaitons adapter la hauteur, nous pouvons bien sûr supprimer l'attribut height. Parfois, nous avons besoin d’une hauteur minimale pour occuper un certain espace. L'attribut min-height est donc introduit. Mais malheureusement, ie6.0 ne le prend pas en charge ! !

Mais lorsque nous avons testé le même code dans IE6.0, le résultat était celui-ci :

Quelle surprise ! ! Dans IE6, lorsque le contenu dépasse la hauteur, la hauteur échoue ! ! N'est-ce pas exactement ce que min-height essaie d'atteindre ?

Nous devons donc utiliser la technologie hack (_height:120px) pour ie6.0. Je dis « je dois » ici parce que je déteste absolument utiliser des hacks. Vous pouvez en faire l'expérience vous-même. Mon principe est d'utiliser des hacks autant que possible.

Le code est le suivant :

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

Après test, il répond aux attentes.

Nous sommes enfin à mi-chemin du chemin. Évidemment, nous ne sommes pas satisfaits de cela. Un cœur insatisfait peut gagner davantage ! Ne soyez pas gourmand sur le chemin de la technologie ! !

Nous voulons que min-width obtienne cet effet.

Testons-le d'abord :

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

Mais le résultat nous a surpris, cela n'a pas fonctionné dans tous les navigateurs :

Que se passe-t-il? Examen, tout le monde est en grève ! ! Après y avoir bien réfléchi, il s’avère que ce n’est pas ainsi que cela fonctionne. Par défaut, la hauteur du conteneur est déterminée par le contenu, mais pas la largeur ! Par défaut, la largeur du conteneur parent est héritée. Bien entendu, le principe est que l’affichage est bloqué.

Oh, c'est ce qui s'est passé, nous devons laisser la largeur par défaut du conteneur être déterminée par le contenu.

À partir de là, j'ai pensé à plusieurs situations :

1 display:inline Mais il y a un problème : si tel est le cas, la largeur sera invalide. Après test, la largeur minimale. est également invalide. Cette situation est que j'ai perdu mon pass, allons à l'audition ! ! ;

2 Nous avons donc pensé à l'attribut display:inline-block ; Eh bien, cela ne devrait poser aucun problème ! ? Allons-y

Le code est le suivant :

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

Après test, il est valable pour Firefox, Chrome et ie8.0.

Merde, ie6 ne fonctionne toujours pas ! ! Et si quelqu'un vient causer des ennuis, ie7 ne fonctionnera pas non plus. Non, regardez de plus près, il s'avère que ie6 et ie7 n'implémentent pas display:inline-block;
Modifiez le code :

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

Essayez d'abord ie7, ok, vous avez terminé ! Essayez à nouveau ie6, toujours "maléfique" ! ! Ne vous inquiétez pas, nous comprenons au moins l'utilisation de min-width, qui ne fonctionne que lorsque la largeur est déterminée par le contenu. Essayez de mettre plus de contenu. Le conteneur deviendra-t-il plus grand comme nous le pensons si le contenu dépasse la limite ?

Eh bien, c'est sûr. Mais il y a un petit problème, c'est que lorsque le contenu dépasse la largeur du navigateur, il sera toujours renvoyé. Laissez-le tranquille ! Résolvez d'abord le problème d'IE6.0.

Après y avoir bien réfléchi, je reviens désormais à ma réflexion initiale. Seul le i6 a un problème. Comment a-t-il été résolu en premier lieu ? Oh, la hauteur de ie6.0 elle-même a les caractéristiques de la hauteur minimale. Est-ce la même chose pour la largeur ? Essayons d'ajouter _width:220px

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

Le résultat est sérieux et nous sommes très déçus. Notre seul fil de pensée a été coupé ! Ce qu'il faut faire? Ce qu'il faut faire? ....."Saut de ligne !!??" Alors je vous laisserai ne pas rompre la ligne ! ! !

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

 

同样加些内容：

预期达到！

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!