html - inspeccionar - optgroup
¿Por qué Chrome, Firefox e IE procesan de forma diferente los controles SELECT de ancho fijo? (9)
Estoy perdiendo pelo en este ... parece que cuando corrijo el ancho con un control HTML SELECT, su ancho varía de acuerdo con el navegador.
¿Alguna idea de cómo estandarizar esto sin tener que recurrir a varias hojas de estilo?
Aquí es con lo que estoy trabajando:
.combo
{
padding: 2px;
width: 200px;
}
.text
{
padding: 2px;
width: 200px;
}
Este es mi tipo de documento para la página:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Asegúrese de eliminar todos los márgenes y el relleno predeterminados, y defínalos explícitamente. Asegúrate de estar usando un DOCTYPE apropiado y, por lo tanto, renderizando IE en el modo estándar.
Intente también configurar font-size en las selecciones, lo que puede afectar la forma en que se representan. Considere también las propiedades min-width y max-width .
Pruebe usar Firebug o la función "Inspeccionar Elemento" de Chrome (haga clic con el botón derecho 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.
Puede usar un widget desplegable falso y reemplazar el SELECT.
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 aún no les muestra el mismo tamaño.
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 forma de diseñarlos de manera confiable entre navegadores y teniendo en cuenta el futuro es reemplazarlos por JavaScript o Flash e imitar su funcionalidad
Los navegadores tienden a limitar la cantidad de controles de formulario con CSS, ya que los controles de formulario tienen un estilo complicado que varía según 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 tiene control total sobre el aspecto de los campos de formulario, y experimentar con cualquier estilo es realmente importante.
entrada [tipo = texto], seleccione {borde: sólido 1px # c2c1c1; ancho: 150px; relleno: 2px; }
// entonces
seleccione {ancho: 156px; // necesita ser ingresado [tipo = texto] ancho + (borde y relleno)}
/ * La entrada [tipo = texto] ancho = ancho + relleno + borde
El ancho de selección simplemente es igual al ancho. El relleno y el borde se renderizan dentro de esa restricción de ancho. Así es como SELECT rueda ...
* /
Martinator es correcto.
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 puede hacer esto con el área de texto:
select {
width:350px;
}
Otros tipos de entradas requieren la sintaxis que 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;
}