CSS - Utilisation de min-width, max-width avec IE

Auteur : 3L!X | Créé le : 04/08/2007 à 19H30 (Source : forum.alsacreations.com)

Les versions antérieures à Internet Explorer 7, ne comprennent pas les propriétés CSS "min-width" et "max-width".
Nous allons donc utiliser une méthode avec du Javascript, afin de reproduire le même résultat.

Pour le cas de "min-width"

<!--[if lt IE 7]>
	<style type="text/css">
	div {
		width: 770px;
		width: expression(document.body.clientWidth <= 600? "600px": "auto");
	}
	</style>
<![endif]-->

Explication : Si la largeur du document est inférieure à 600px, alors il sera forcé à 600px, sinon il restera à "auto" (il y'a donc une apparition des barres d'ascenseur horizontales au seuil de 600px).
Dans le cas où, le JavaScript est inactif, la propriété "width" prendra le relais pour avoir un affichage "raisonnable en largeur".

Pour le cas de "max-width"

<!--[if lt IE 7]>
	<style type="text/css">
	div {
		width: 770px;
		width: expression(document.body.clientWidth >= 1000? "1000px": "auto");
	}
	</style>
<![endif]-->

Explication : Si la largeur du document est supérieure à 1000px, alors il sera forcé à 1000px, sinon il restera à "auto".
Dans le cas où, le JavaScript est inactif, la propriété "width" prendra le relais pour avoir un affichage "raisonnable en largeur".

[0] commentaire - Voir/Editer