Maison  >  Article  >  interface Web  >  Solution au problème selon lequel la largeur maximale et la hauteur minimale ne sont pas prises en charge par IE6

Solution au problème selon lequel la largeur maximale et la hauteur minimale ne sont pas prises en charge par IE6

php中世界最好的语言
php中世界最好的语言original
2017-12-16 11:01:151950parcourir

Aujourd'hui, je vais vous apporter une solution au problème selon lequel max-width et min-height ne sont pas pris en charge par IE6.

Nous définissons souvent la hauteur minimale d'une page pour obtenir un bel affichage même lorsque le contenu de la page entière n'est pas enrichi. Parfois, en définissant la largeur maximale de l'image sans dépasser la largeur définie, nous pouvons définir une. hauteur minimale en utilisant min-height et définissez la limite de largeur maximale en utilisant l'attribut CSS max-width. Mais le problème est que les versions IE7 et supérieures le prennent en charge, mais seul IE6 ne prend pas en charge min-height, MAX-height, max-width, min-width. ?

DIVCSS5 introduit une solution utilisant le hack CSS. Comme nous le savons tous, nous définissons généralement la largeur ou la hauteur de l'objet si l'image ou le contenu est plus grand que la largeur définie, IE6 brisera la largeur et la hauteur définies. . C'est ce que nous pouvons faire. Utilisez ceci et la reconnaissance CSS unique d'IE6 pour faire correspondre "_" pour résoudre le problème

Par exemple, nous devons définir une hauteur minimale de 500 px pour qu'une page Web soit belle, mais que devons-nous faire si IE6 ne le prend pas en charge ?
Il se trouve que nous utilisons les propriétés CSS pour lire de gauche à droite et remplaçons la valeur de la propriété CSS en bas et à droite par des propriétés répétées de haut en bas.

Le code CSS spécifique est le suivant :

.div{min-height:500px;_height:500px;}

Remarque : assurez-vous de faire attention à l'ordre. Le premier est pris en charge par tous les IE, Firefox et Google. IE7 et supérieur, alors que ce dernier n'est pris en charge que par IE6, ce qui est parfait. Ce CSS HACK et cette séquence de lecture CSS sont utilisés pour résoudre ce problème.

Bien sûr, il existe également le code CSS suivant :

.div{height: expression(this.height> 500 ? 500 : true);  max-height: 500px;}

Mais ce code CSS empêchera l'image de s'afficher correctement après le chargement (l'image sera réduite de manière aléatoire et ne peut pas être affiché normalement)

Nous vous recommandons donc d'utiliser min-height:500px;_height:500px; pour résoudre le problème de l'incapacité d'IE6 à utiliser les attributs max et min.


Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Réponses aux questions sur la dénomination des cas de chameaux et JS

Valeurs booléennes, opérateurs relationnels en JS, Explication détaillée et exemples d'opérateurs logiques

Résumé du framework front-end js et explication de ses utilisations

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn