¿Tiene alguna idea sobre cómo hacer que el atributo del marcador de posición se centre verticalmente en safari? Aunque cuando empiezas a escribir, el texto está perfectamente centrado.El texto del marcador de posición no está centrado verticalmente en Safari
funciona bien para mí:
<input type="text" name="first_name" placeholder="Search" style="height: 50px;">
trate de cambiar esto:
#register-block-fields input {
width: 230px;
height: 41px;
padding-left: 40px;
padding-right: 20px;
height: 41px; // Changed from line-height
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: none;
}
Normalmente, me parece que es mejor usar altura y altura de línea para las entradas de texto. IIRC Gecko hace algo extraño de lo contrario. Aparentemente, en algunos casos, webkit también lo hace. –
Eso es usualmente con lo que yo también. También asegúrate de utilizar este método en otros campos, por alguna razón obtuve una página diferente en safari a Chrome, así que usé esto como ejemplo. –
¡Esto es perfecto! Sin embargo, quitar la altura de la línea arruinará IE. Lo mantuve allí pero acabo de agregar/9 después de él, lo que parece arreglar eso. – Donny
La manera más fácil es usar las propiedades de CSS line-height y . Simplemente dé la entrada de texto a line-height con el mismo valor que su height.
Por cierto, su sitio en vivo se ve bien para mí en cromo 16.
Tenía este error también. Establecer line-height en ems me solucionó esto. Se ve igual en Chrome, Safari (escritorio e iOS) y Firefox. y agregué un truco \ 9 para obtener el centrado vertical en IE. aquí está mi css
height: 36px;
line-height: 1.2em;
line-height: 26px\9; /*for IE */
¡Esto me salvó! ¡Gracias! – ForOhFor
Para mí, la mejor solución es usar line-height: normal y cortar para IE 8.
<input type="text" name="test_name" placeholder="Search">
input {
height: 35px;
line-height: normal;
line-height: 32px\0/; /* for IE 8 */
}
¡Increíble! Esta es la única solución que he encontrado (con solo altura y altura de línea) que funciona tanto en IE8 como en Safari. –
-Safari Solución-
me quedé atrapado en este tema durante mucho tiempo a pesar de utilizar
input::-webkit-input-placeholder { line-height:normal!important; }
resulta que HAV Al escribir una altura de línea en el elemento inmediato input estaba rompiendo mi línea de altura input::webkit-input-placeholder.
Extensión de la solución:
me quita la línea de altura en mi estilo de entrada y se fija mi problema.
¡La mejor respuesta ...! –
Esta cosa '-webkit-input-placeholder' también corrige el texto del marcador de posición de recorte en Safari, p. parte inferior de la letra "g" –
Para mí esto ha funcionado bien:
line-height: inherit;
podría proporcionar algo de código? –