¿Por qué Chrome, Firefox e IE procesan de forma diferente los controles SELECT de ancho fijo?

Estoy perdiendo cabello en este caso ... parece que cuando corrijo el ancho de un control HTML SELECCIONAR, su ancho varía según el navegador.¿Por qué Chrome, Firefox e IE procesan de forma diferente los controles SELECT de ancho fijo?

¿Alguna idea de cómo estandarizar esto sin tener que recurrir a varias hojas de estilo?

Esto es lo que estoy trabajando con:

.combo 
{ 
    padding: 2px; 
    width: 200px; 
} 

.text 
{ 
    padding: 2px; 
    width: 200px; 
}

Este es mi tipo de documento de la página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Fuente

2008-09-25 mattruma

Los controles de formulario siempre serán menos obedientes a los intentos de estilo, en particular selecciones y entradas de archivos, por lo que la única manera de diseñarlos de manera confiable entre navegadores y teniendo en cuenta el futuro es reemplazarlos con JavaScript o Flash y imitar su funcionalidad

Fuente

2008-09-26 19:56:58

asegúrese de eliminar todos los márgenes predeterminados y el relleno, y definir explícitamente. Asegúrate de estar usando un DOCTYPE apropiado y, por lo tanto, renderizando IE en el modo estándar.

Fuente

2008-09-25 18:30:07

Incluí mi DOCTYPE en mi pregunta original ... ¿esto parece correcto? – mattruma

Sí, DOCTYPE se ve bien. –

Pruebe la configuración font-size en las selecciones también, que pueden afectar la forma en que se representan. También considere las propiedades min-width y max-width.

Fuente

2008-09-25 18:30:17

El OP quiere un ancho fijo y no un ancho variable. I ++ 'd u debido al tamaño de la fuente, pero el *-ancho no tiene sentido. – MDCore

No recuerdo realmente sobre 2008, pero en estos días el ancho máximo solucionó el problema de "seleccionar". + 'd esto! – Zuul

Puede usar un widget desplegable falso y reemplazar el SELECT.

Fuente

2008-09-25 18:32:04

Pruebe utilizar Firebug o la función "Inspeccionar Elemento" de Chrome (haga clic con el botón secundario en el control de selección, haga clic en "inspeccionar elemento") para ver exactamente qué propiedades de estilo se heredan/representan para ese objeto específico. Eso debería guiarte en la dirección correcta.

Fuente

2008-09-25 18:35:35 Ryan

He intentado todas estas sugerencias ... y finalmente lo tengo para que se vea bien en IE y Firefox. Parece que hay algo mal con el relleno en el control SELECCIONAR. Si aumento el ancho de SELECT en 2 píxeles, ahora el tamaño es correcto.

.combo 
{ 
    padding: 2px; 
    width: 206px; 
} 

.text 
{ 
    padding: 2px; 
    width: 200px; 
}

Sin embargo, Chrome todavía no muestra el mismo tamaño.

Fuente

2008-09-25 20:17:47 mattruma

Lo que dijo @Radu: los controles de formulario limitan sus opciones de estilo. Encuentre un reemplazo de Javascript < select >. – MDCore

Los navegadores tienden a limitar la cantidad que se puede aplicar a los controles de formulario con CSS, porque los controles de formulario tienen un estilo complicado que varía entre los sistemas operativos. CSS no puede describirlo del todo, por lo que los navegadores limitan algunos de sus límites.

Eric Meyer escribió un buen artículo sobre el tema:

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

Lo mejor que puede hacer es aceptar que no tienen un control completo sobre el aspecto de los campos del formulario, y experimentar con lo que es el estilo realmente importante.

Fuente

2008-11-25 17:56:22

entrada [tipo = texto], seleccione { borde: sólido 1px # c2c1c1; ancho: 150px; relleno: 2px; }

// entonces

seleccione { anchura: 156px; // necesario que haya de entrada [type = texto] ancho + (la frontera y el relleno) }

/* La entrada [type = texto] width = ancho + acolchado + frontera

La anchura seleccione simplemente es igual anchura. El relleno y el borde se renderizan dentro de esa restricción de ancho. Eso es sólo la forma en rollos SELECT ...

Fuente

2011-02-21 18:36:51 Martinator

Martinator es correcta.

Parece que estás tratando de controlar el ancho de varios tipos de entradas o menús en todos los bowsers. Puede seleccionar directamente el objeto y especificar el ancho. Por ejemplo:

select { 
    width:350px; 
}

O bien, puede hacer esto con área de texto:

select { 
     width:350px; 
}

Otros tipos de entradas requieren la sintaxis Martinator menciona. Entonces, para una entrada de texto, entrada o incluso tipo de archivo, harías esto para cada uno:

input[type=text] { 
     width:350px; 
} 

input[type=input] { 
     width:350px; 
} 

input[type=file] { 
     width:350px; 
}

Fuente

2012-04-25 23:07:56 cheekybastard

¿Por qué Chrome, Firefox e IE procesan de forma diferente los controles SELECT de ancho fijo?

Respuesta

Cuestiones relacionadas