2012-08-12 27 views
8

Tengo un problema con la alineación vertical del título del cuadro de selección en Firefox.alineación vertical del texto en el cuadro de selección - problema de firefox

screen from Firefox

CSS para seleccionar el siguiente aspecto:

select#cities_list { 
    width: 95px; 
    height: 45px; 
    line-height: 45px; 
    background: url('./img/select-arrow.png') no-repeat right transparent; 
    -webkit-appearance: none; 
    border: 1px solid #dcdcdc; 
    border-left: none; 
    border-right: none; 
    padding: 0 10px; 
    margin: 0; 
    float: left; 
} 

En Chrome todo se ve bien:

enter image description here

Ayuda!

+0

Hola forkie, ¿Has solucionado este problema? Si es así, ¡por favor ayúdenme! –

Respuesta

14

Usted puede probar este

padding:.3em;/.4em; 

dependiendo de su configuración.

+6

¿Qué diablos es eso? Lo intenté y funcionó en su mayor parte. ¿Qué es este truco? – ClosDesign

+2

¿Qué tipo de hechicería es esta? Funcionó perfectamente ... –

+0

aunque no tengo ni idea de por qué funciona ... al igual que un fyi también se puede decir algo como: relleno: .3em .4em .3em .7em;/0; Y parece funcionar. – corymathews

0

Otro método, que yo prefiero, es la siguiente:

@-moz-document url-prefix() { 

    select { 
     padding-top: 8px; 
    } 
} 

Establecer la padding-top a lo que quiera. Cualquier cosa dentro de los corchetes @-moz-document url-prefix() se ejecutará solo en Firefox.

+0

¿Es esto un truco? ¿Esto durará en futuras versiones de Firefox? Apliqué padding-top: 4px a la entrada de selección y resuelve el problema. Parece que el botón de selección cambia su posición vertical solo en Firefox, pero me preocupa que algún navegador futuro o un navegador no probado no estén alineados debido al panel de relleno de 4px. ¿Que dirias sobre esto? ¡Gracias por adelantado! –

Cuestiones relacionadas