CSS: cómo establecer el ancho del control de formulario para que todos tengan el mismo ancho?

Consideremos el siguiente ejemplo:CSS: cómo establecer el ancho del control de formulario para que todos tengan el mismo ancho?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      div { width: 15em } 
      input, textarea, select { width: 100%; 
       -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } 
     </style> 
    </head> 
    <body> 
     <form> 
      <div> 
       <input value="Input"> 
      </div> 
      <div> 
       <textarea>Text area</textarea> 
      </div> 
      <div> 
       <select> 
        <option>One</option> 
        <option>Two</option> 
        <option>Three</option> 
       </select> 
      </div> 
     </form> 
    </body> 
</html>

El navegador que soporte el border-box caja de medición, esto se representa como yo quiero:

Correct rendering http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

En IE 6/7, sin embargo, esto se hace como:

IE 6/7 rendering http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png

¿Cómo puedo obtener la misma representación en IE 6/7 que obtengo en otros navegadores, sin recurrir a la configuración de tamaños en píxeles?

Fuente

2010-05-22 avernet

¿Te importaría si sugiero la publicación cruzada de esta pregunta en http://doctype.com/? –

Esto no es posible con CSS. Investigué un poco y descubrí que se hizo la misma pregunta antes de here. La solución es utilizar este archivo boxsizing.htc y añadir la siguiente línea a la cabeza HTML:

<!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]-->

Fuente

2010-05-22 01:34:24 BalusC

Quizás esto podría ayudarlo: CSS3 support for Internet Explorer 6, 7, and 8. Desde la página:

IE-CSS 3 es una secuencia de comandos para proporcionar apoyo Internet Explorer para varios de los estilos populares disponibles en nuevas el próximo estándar CSS3.

Fuente

2010-05-22 00:36:58 eKek0

Desafortunadamente, este 'htc' no incluye soporte para' box-sizing'. – BalusC

Una solución rápida podría ser a IE6/7-Hack navegador con algo como select { *width:102.5%; _width:102.5%; } aunque esto puede no alinearse al píxel si son demasiado amplias.

Fuente

2010-05-22 00:57:32 mVChr

El problema con esto es que lo bloquea en un tamaño de fuente determinado. Digamos que agrego un 'select {* width: 102.5%}'. Perfecto, ahora los campos de formulario tienen el mismo ancho: http://img.skitch.com/20100522-ght27dws54jqp8r79bf5nf1hus.png. Pero ahora agrega un 'cuerpo {font-size: 200%}'. Con el mismo 'select {* width: 102.5%}', obtiene: http://img.skitch.com/20100522-ksie3bm45e83g314869fdhby29.png. Entonces, ese porcentaje que pones en 'select {* width: 102.5%}' dependería del tamaño de la fuente. A medida que cambie el tamaño de su fuente, tendrá que cambiar ese porcentaje. En lugar de esto, preferiría ir con un ancho en píxeles. – avernet

La solución es utilizar CSS y JavaScript para reemplazar forma controles que los fabricantes de navegadores han conspirado para hacer un dolor de estilo. Una selección es solo un menú desplegable con un evento onmouseup. Los editores de texto controlados por JS (ricos y simples) que pueden reemplazar un área de texto abundan en línea. Incluso hay libs solo para este propósito. (Example)

Fuente

2010-05-22 02:03:22 reisio

CSS: cómo establecer el ancho del control de formulario para que todos tengan el mismo ancho?

Respuesta

Cuestiones relacionadas