Comment faire fonctionner min-width en pourcentage dans IE7 ?

Question

Comment faire fonctionner {min-width:100%} dans IE7 ? Fonctionne bien dans IE8+ et les autres navigateurs.

Je utilise un menu déroulant où la largeur du menu déroulant doit dépendre du texte le plus long dans le menu déroulant mais ne doit pas être inférieure à la largeur du lien parent. J'ai donc ajouté min-width:100% au menu déroulant. Mais cela fonctionne pour les autres navigateurs mais pas pour IE7.

Comment puis-je le faire fonctionner ?

La démo est ici pour être testée et modifiée. Vérifiez cela dans IE7 http://codepen.io/jitendravyas/pen/AheDs

Answer 1

Veuillez consulter Ceci je pense que c'est exactement ce que vous recherchez.

Answer 2

Essayez Modernizr, il rend possible beaucoup de choses dans les navigateurs plus anciens ou moins compatibles sans trop de soucis. Essayez la version de développement pour voir si elle peut vous aider et composez votre propre version de production ciblant vos besoins spécifiques pour minimiser la taille (et la vitesse) de la bibliothèque javascript.

Modernizr est une bibliothèque JavaScript qui détecte les fonctionnalités HTML5 et CSS3 dans le navigateur de l'utilisateur.

Answer 3

IE7 ne fonctionne pas comme les autres navigateurs de cette manière. Il a besoin d'une largeur explicite sur l'élément parent. Votre code actuel lui donne une largeur ici :

.site-nav .flyout-content{
    border:1px solid #e4e4e3;
    /*  width:100%;*/
    height:100%;
    min-width:100%;
    *width:170px;  <-------------- CECI EST PRIS EN CHARGE PAR IE7
    box-shadow: 8px 6px 10px rgba(65, 65, 65, 0.45);
}

Si vous connaissez la largeur de votre élément le plus large, vous pourriez changer ce nombre là pour une quantité plus grande, ce qui "fonctionne" comme le montre ce fiddle (Note : l'exemple de CodePen ne fonctionnait pas pour moi en mode IE7, alors j'ai déplacé le code vers jsfiddle.net). Cependant, il serait peut-être mieux pour vous de mettre en place une solution javascript pour IE7 similaire à la solution dans cette question (qui demandait essentiellement la même chose que vous).

Answer 4

Vérifiez la compatibilité CSS et Internet Explorer. Assurez-vous d'avoir un type de document approprié et de ne pas être en mode Quirks en regardant dans les outils de développement du Document Mode.

vérifier IE7 et minWidth

Answer 5

Ie9.js prétend ajouter le support de min-width, et vous pouvez l'ajouter à votre source pour tester avec :

Vous pouvez en savoir plus sur le projet ie7.js (y compris ie9.js) sur http://code.google.com/p/ie7-js/.

Veuillez noter que certaines autres bibliothèques javascript, telles que css3 pie, ne fonctionneront pas avec ie9.js.