Question

Quel est le moyen définitif de reproduire la propriété CSS min-width dans Internet Explorer 6? Est-il préférable de ne pas essayer?

Était-ce utile?

La solution 

foo { min-width: 100px }      // for everyone
* html foo { width: 100px }   // just for IE

(ou envoyez une feuille de style distincte à IE à l'aide de commentaires conditionnels )

Autres conseils

Vous pouvez utiliser une expression (comme suggéré par HBoss), mais si vous êtes préoccupé par les performances, le meilleur moyen de le faire est d’ajouter une cale dans l’élément auquel vous souhaitez appliquer une largeur minimale. 

<div id="container">
  The "shim" div will hold the container div open to at least 500px!
  You should be able to put it anywhere in the container div.
  <div class="shim">&nbsp;</div>
</div>

#container .shim {
  width: 500px;
  height: 0;
  line-height: 0;
}

Cela nécessite un petit balisage non sémantique, mais constitue une solution véritablement multi-navigateurs et ne nécessite pas la surcharge liée à l'utilisation d'une expression.

Cet article sur CSS Play, de Stu Nicholls, présente les différents méthodes permettant d’obtenir min-width dans IE, dans tous les modes (Quirks, etc.) et même pour IE / Mac.

J'ai manipulé chaque réponse donnée ici au cours du mois dernier. Et après avoir joué avec la méthode de Pretaul ( largeur minimale dans MSIE 6 ), il semble être la meilleure alternative à min-width. Pas de piratage ou quoi que ce soit, juste du code CSS conforme qui prend 30 secondes à implémenter.

De googling around, les expressions semblent être les plus populaires. Pour moi de toute façon, il a eu l’intention de verrouiller mon navigateur de façon aléatoire (à la fois pour IE et pour FF).

Je ne sais pas, j'ai eu un peu de succès avec: 

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Une combinaison de dustin diaz 'min-height fast hack & amp; Comment spécifier en HTML ou CSS la largeur minimale absolue d'une cellule de tableau

faites votre balise css en tant que _Width: 500px ou autre chose.

Cela fonctionne plutôt bien ... 

div.container {
    min-width: 760px; 
    width:expression(document.body.clientWidth < 760? "760px": "auto" ); 
}

piratage rapide de hauteur minimale fonctionne pour moi (fonctionne également pour largeur)

L'exemple de shim convient parfaitement pour forcer le navigateur à afficher une barre de défilement horizontale lorsque le conteneur atteint une certaine taille, mais vous remarquerez que le contenu du conteneur sera toujours redimensionné à mesure que la fenêtre devient plus petite. J’imagine que ce n’est pas l’objectif général lorsque nous essayons d’obtenir une largeur minimale dans IE 6.

Technique incomplète à la largeur minimale http://www.mediafire.com/imgbnc. php / 260264acec99b5aba3e77c1c4cdc54e94g.jpg

De plus, l’utilisation d’expressions et d’autres hack fous en CSS n’est tout simplement pas une bonne pratique. Ils sont dangereux et malpropres. Cet article explique les mises en garde relatives aux piratages CSS et leur évite de les éviter.

Personnellement, j’estime que le message de Scaryjeff est le meilleur conseil pour obtenir une largeur minimale dans IE6 et, en tant que développeur de mise en page CSS expérimenté, je n’ai pas encore trouvé de meilleure solution applicable à ce type de problèmes.

  

Cet article sur CSS Play, de Stu Nicholls, présente les différents méthodes permettant d’obtenir min-width dans IE, dans tous les modes (Quirks, etc.) et même pour IE / Mac.

J'ai fourni une réponse à une question similaire qui détaille l'utilisation de cette technique pour obtenir correctement la largeur minimale. Vous pouvez le voir ici:

CSS: deux colonnes à 50% de fluide ne respectant pas largeur minimale

La technique est simple, valide CSS qui peut être utilisé dans presque toutes les situations. Appliqué à l'exemple de shim ci-dessus, il résulte ce que je considère être la fonctionnalité correcte min-width.

Technique de correction de la largeur minimale http://www.mediafire.com/imgbnc. php / a67b2820bfbd6a5b588bea23c4c0462f4g.jpg

Bouton de ligne unique 

button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}

Utilisez des commentaires conditionnels pour faire référence à une feuille de style spécifique à MSIE 6, puis créez CSS comme ci-dessous.

Les navigateurs compatibles utiliseront: 

min-width: 660px;

Ensuite, MSIE 6 utilisera: 

width: expression((document.body.clientWidth < 659)? "660px" : "auto");
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top