problème

j'ai un <select> où l'une de ses valeurs de texte <option> est très longue. Je veux que le <select> soit redimensionné pour qu'il ne soit jamais plus large que son parent, même s'il doit couper son texte affiché. max-width: 100% devrait faire ça.

avant resize:

ce que je veux après redimensionner:

mais si vous chargez ce jsfiddle exemple et redimensionnez la largeur du panneau de résultat pour être plus petite que celle du <select> , vous pouvez voir que le select à l'intérieur du <fieldset> ne parvient pas à réduire sa largeur vers le bas.

ce que je vois après redimensionner:

cependant, la page équivalente avec un <div> au lieu de <fieldset> fait échelle correctement. Vous pouvez le voir et tester vos modifications plus facilement si vous avez a <fieldset> et un <div> à côté de l'autre sur une page . Et si vous supprimez l'environnement <fieldset> tags , le redimensionnement fonctionne. La balise <fieldset> est en quelque sorte responsable du redimensionnement horizontal de casser.

le <fieldset> actes est comme si il y a une règle CSS fieldset { min-width: min-content; } . ( min-content signifie, grossièrement, la plus petite largeur qui ne provoque pas un débordement d'un enfant.) Si je remplace le <fieldset> par un <div> par min-width: min-content , il semble exactement le même. Pourtant, il n'y a pas de règle avec min-content dans mes styles, dans la feuille de style par défaut du navigateur, ou visible dans L'Inspecteur CSS de Firebug. J'ai essayé d'outrepasser tous les styles visibles sur le <fieldset> dans Firebug CSS Inspecteur et dans Firefox par défaut de la feuille de style les formes.css , mais cela n'a pas aidé. L'annulation de min-width et width n'a rien fait non plus.

Code

HTML du fieldset:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

Mon CSS qui devrait fonctionner, mais n'est-ce pas:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

Réinitialisation des propriétés width en par défaut ne fait rien:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

D'autres CSS dans lequel je essayer de ne pas corriger le problème :

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

plus de détails

le problème se produit également dans ce exemple de jsFiddle plus complet et plus compliqué , qui est plus similaire à la page web que je suis en fait en train d'essayer de corriger. Vous pouvez voir à partir de cela que le <select> n'est pas le problème – un bloc en ligne div ne redimensionne pas non plus. Bien que cet exemple soit plus compliqué, je suppose que le correctif pour le cas simple ci-dessus va également corriger ce cas plus compliqué.

[Edit: voir les détails de la prise en charge par le navigateur ci-dessous.]

une chose curieuse au sujet de ce problème est que si vous mettez div.wrapper { width: 50%; } , le <fieldset> cesse de se redimensionner au point puis la pleine taille <select> aurait frappé le bord de la fenêtre d'affichage. Le redimensionnement se produit comme si le <select> avait width: 100% , bien que le <select> semble avoir width: 50% .

si vous donnez le <select> lui-même width: 50% , ce comportement ne se produit pas; la largeur est simplement correctement définie.

je ne comprends pas la raison pour cette différence. Mais il peut ne pas être pertinente.

j'ai aussi trouvé la question très similaire le jeu de champ HTML permet aux enfants d'étendre indéfiniment . L'asker n'a pas pu trouver de solution et devine qu'il n'y a pas de solution à part enlever le <fieldset> . Mais je me demande, s'il est vraiment impossible de rendre l'affichage <fieldset> correct, pourquoi? Quoi dans <fieldset> ’s spec ou css par défaut ( à partir de cette question ) provoque ce comportement? Ce comportement particulier est probablement documenté quelque part, depuis plusieurs navigateurs fonctionnent comme cela.

arrière-plan objectif et les exigences

la raison pour laquelle j'essaie de faire ceci est dans le cadre de l'écriture de styles mobiles pour une page existante avec un grand formulaire. Le formulaire comporte plusieurs sections, et une partie est enveloppée dans un <fieldset> . Sur un smartphone (ou si vous réduisez la fenêtre de votre navigateur), la partie de la page avec le <fieldset> est beaucoup plus large que le reste du formulaire. La plupart de la forme limite sa largeur juste fine, mais la section avec le <fieldset> ne le fait pas, forçant l'utilisateur à zoomer ou faire défiler à droite pour voir toute cette section.

je me méfie de simplement supprimer le <fieldset> , car il est généré sur de nombreuses pages dans une grande application, et je ne suis pas sûr de ce que les sélecteurs en CSS ou JavaScript pourrait en dépendent.

je peux utiliser JavaScript si je dois, et une solution JavaScript est mieux que rien. Mais si JavaScript est le seul moyen de faire cela, je serais curieux d'entendre une explication pour pourquoi ce n'est pas possible en utilisant seulement CSS et HTML.

Edit: prise en charge du navigateur

sur le site, je dois soutenir Internet Explorer 8 et plus tard (nous venons de laisser tomber le soutien pour IE7), Le Dernier Firefox, et Le Dernier Chrome. Cette page particulière devrait également fonctionner sur iOS et smartphones Android. Un comportement légèrement dégradé mais encore utilisable est acceptable pour Internet Explorer 8.

j'ai retesté my broken fieldset exemple sur les différents navigateurs. Il fonctionne en fait déjà dans ces navigateurs:

• Internet Explorer 8, 9, et 10
• Chrome
• Chrome pour Android

il casse dans ces navigateurs:

• Firefox
• Firefox pour Android
• Internet Explorer 7

ainsi, le seul navigateur que je me soucie que le code actuel se brise est Firefox (à la fois sur le bureau et mobile). Si le code a été fixé de sorte qu'il a fonctionné dans Firefox sans le casser dans d'autres navigateurs, qui résoudrait mon problème.

le modèle HTML du site utilise les commentaires conditionnels D'Internet Explorer pour ajouter des classes telles que .ie8 et .oldie à l'élément <html> . Vous pouvez utiliser ces classes dans votre CSS si vous avez besoin de travailler autour des différences de style dans IE. Les classes ajoutées sont les mêmes que dans cette ancienne version du Boilerplate HTML5 .