Problema

tengo un<select> donde uno de sus<option>Los valores del texto son muy largos. Quiero el<select> para cambiar el tamaño para que nunca sea más ancho que su padre, incluso si tiene que cortar el texto que se muestra.max-width: 100% debería hacer eso

Antes de redimensionar:

Lo que quiero después de cambiar el tamaño:

Pero si tucargar este ejemplo jsFiddle y redimensione el ancho del panel de resultados para que sea más pequeño que el del<select>, se puede ver que la selección dentro de la<fieldset> falla al escalar su ancho hacia abajo.

Lo que realmente estoy viendo después de cambiar el tamaño:

sin embargo, elpágina equivalente con un<div> en vez de una<fieldset> hace escala correctamente Puedes ver eso yprueba tus cambios más fácilmente si usted tienea <fieldset> y un<div> uno al lado del otro en una página. Y si tueliminar el entorno<fieldset> etiquetas, el redimensionamiento funciona. los<fieldset> la etiqueta de alguna manera está causando que el tamaño horizontal se rompa.

los<fieldset> Actúa es como si hubiera una regla CSS.fieldset { min-width: min-content; }. (min-content significa, aproximadamente, el ancho más pequeño que no hace que un niño se desborde.) Si reemplazo el<fieldset> con un<div> conmin-width: min-content, Se ve exactamente igual. Sin embargo, no hay regla conmin-content en mis estilos, en la hoja de estilo predeterminada del navegador, o visible en el Inspector CSS de Firebug. Intenté anular todos los estilos visibles en el<fieldset> en el Inspector CSS de Firebug y en la hoja de estilo predeterminada de Firefoxforms.css, pero eso no ayudó. Anulando específicamentemin-width ywidth Tampoco hice nada.

Código

HTML del conjunto de campos:

<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>

Mi CSS que debería estar funcionando pero no es:

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

select {
    max-width: 100%;
}

Restableciendo elwidth propiedades paralos valores por defecto no hace nada:

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

CSS adicional en el que yotratar y no solucionar el problema:

/* 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;
}

Más detalles

El problema también se produce en esteEjemplo jsFiddle más completo, más complicado., que es más similar a la página web que realmente estoy tratando de arreglar. Se puede ver que el<select> no es el problema - un bloque en lineadiv También falla al cambiar el tamaño. Aunque este ejemplo es más complicado, asumo que la solución para el caso simple de arriba también solucionará este caso más complicado.

[Editar: ver detalles de soporte del navegador a continuación.]

Una cosa curiosa sobre este problema es quesi establecediv.wrapper { width: 50%; }, la<fieldset> deja de redimensionarse en el punto entonces el tamaño completo<select> Habría golpeado el borde de la ventana. El cambio de tamaño ocurre como si el<select> tienewidth: 100%, a pesar de<select> parece que tienewidth: 50%.

Si tudar el<select> sí mismowidth: 50%, ese comportamiento no se produce; el ancho simplemente se establece correctamente

No entiendo la razón de esa diferencia. Pero puede que no sea relevante.

También encontré la pregunta muy similarHTML fieldset permite que los niños se expandan indefinidamente. El solicitante no pudo encontrar una solución yadivina que no hay solución aparte de quitar el<fieldset>. Pero me pregunto, si realmente es imposible hacer el<fieldset> Mostrar bien, ¿por qué es eso? Que en<fieldset>’Sespeculación oCSS por defecto (a partir de esta pregunta) causa este comportamiento? Este comportamiento especial probablemente se documente en algún lugar, ya que varios navegadores funcionan así.

Fondo objetivo y requisitos

La razón por la que estoy tratando de hacer esto es como parte de la escritura de estilos móviles para una página existente con un gran formato. El formulario tiene varias secciones, y una parte de él está envuelta en un<fieldset>. En un teléfono inteligente (o si hace que la ventana de su navegador sea pequeña), la parte de la página con<fieldset> Es mucho más ancho que el resto de la forma. La mayor parte de la forma limita su ancho muy bien, pero la sección con el<fieldset> no, lo que obliga al usuario a alejarse o desplazarse a la derecha para ver toda esa sección.

Estoy preocupado de simplemente eliminar el<fieldset>, ya que se genera en muchas páginas en una aplicación grande, y no estoy seguro de qué selectores en CSS o JavaScript pueden depender de ello.

Puedo usar JavaScript si lo necesito, y una solución JavaScript es mejor que nada. Pero si JavaScript es la única forma de hacer esto, me gustaría saber una explicación de por qué esto no es posible usando solo CSS y HTML.

Edición: soporte del navegador

En el sitio, necesito compatibilidad con Internet Explorer 8 y versiones posteriores (solo eliminamos la compatibilidad con IE7), la última versión de Firefox y la última versión de Chrome. Esta página en particular también debería funcionar en teléfonos inteligentes iOS y Android. El comportamiento ligeramente degradado pero aún utilizable es aceptable para Internet Explorer 8.

Volví a probarmi rotofieldset ejemplo en diferentes navegadores. En realidad ya funciona en estos navegadores:

Internet Explorer 8, 9 y 10CromoChrome para Android

Se rompe en estos navegadores:

FirefoxFirefox para AndroidInternet Explorer 7

Por lo tanto, el único navegador que me importa en el que se rompe el código actual es Firefox (tanto en el escritorio como en el móvil). Si el código se arreglara de modo que funcionara en Firefox sin dividirlo en ningún otro navegador, eso solucionaría mi problema.

La plantilla HTML del sitio utiliza los comentarios condicionales de Internet Explorer para agregar clases como.ie8 y.oldie al<html> elemento. Puede usar esas clases en su CSS si necesita solucionar las diferencias de estilo en IE. Las clases añadidas son las mismas que enesta versión antigua de HTML5 Boilerplate.