Tamaños de fuente y herencia en controles de formulario

Y ahora algo en serio

Supuestamente, el tamaño de fuente deberí­a heredarse del elemento padre. Por casualidad (no sabemos quien lo dijo), hemos sabido que los elementos reemplazados (basicamente, controles de formulario, input) no siguen este comportamiento (algunas veces). Aquí­ estamos para daros la solución.

Se trata de realizar una baterí­a de pruebas para determinar un patrón de comportamiento entre diferentes navegadores y proporcionar una solución compatible con todos ellos.

La solución, al final.

La lista de navegadores utilizada es la que sigue:

• Internet Explorer 5.5
• Internet Explorer 6
• Internet Explorer 7
• Mozilla Firefox 1.5.0.3 (W)
• Opera 8.54 (W)
• Mozilla Firefox 1.5.0.3 (L)
• Opera 9 (L)
• Konqueror 3.5.2
• Galeon 2.0.1

La prueba consiste en realizar diferentes cambios en las propiedades de fuente aplicadas a los elementos del siguiente código:

<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Curabitur commodo. Phasellus quis dui ut est
scelerisque tempus. Sed faucibus nisl consequat dolor.
Vestibulum ornare laoreet nunc. Nunc euismod nulla et libero.
In dictum. Sed fringilla. Ut nisi neque, porttitor vitae, pretium vel,
sodales a, massa. Vestibulum orci. Quisque pellentesque, leo
vel posuere luctus, ante nisl lobortis mauris, in tempus pede
nibh at nibh. Etiam vehicula varius felis. Sed dapibus risus
nec ante. In ultricies. Ut lacinia felis ac eros. Integer
ultricies libero at velit. Vestibulum adipiscing venenatis
purus. Mauris consequat, libero eget lacinia aliquam, risus
nibh gravida ante, eu consequat neque nibh ut lorem. Nam quam.</p>
<form>
	<p>
		<input type="text" name="nombre" value="Lorem" />
	</p>
</form>

A continuación se ofrecen los enlaces a las distintas pruebas realizadas. A la derecha del enlace se indican las propiedades modificadas en cada caso.

1. Ejemplo 1 (no-style)
2. Ejemplo 2 (body: font-size)
3. Ejemplo 3 (body: font-family)
4. Ejemplo 4 (body: font)
5. Ejemplo 5 (body,input: font-family)
6. Ejemplo 6 (body: font-family / input: font-size)
7. Ejemplo 7 (body: font-family / input: font)
8. Ejemplo 8 (body: font-size / input: font-family)
9. Ejemplo 9 (body,input: font-size)
10. Ejemplo 10 (body: font-size / input: font)
11. Ejemplo 11 (body,input: font)
12. Ejemplo 12 (input: font-family)
13. Ejemplo 13 (input: font-size)
14. Ejemplo 14 (input: font)
15. Ejemplo 15 (body: font / input: font-family)
16. Ejemplo 16 (body: font / input: font-size)
17. Ejemplo 17 (body,input: font-family inherit)
18. Ejemplo 18 (body: font-family inherit/ input: font-size inherit)
19. Ejemplo 19 (body,input: font-size inherit)
20. Ejemplo 20 (body: font-size inherit/ input: font-family inherit)
21. Ejemplo 21 (body: font / input: font-family inherit)
22. Ejemplo 22 (body: font / input: font-size inherit)
23. Ejemplo 23 (input: font inherit)
24. Ejemplo 24 (input: font-size font-family inherit)
25. Ejemplo 25 (body,input: inherit)

Se ha observado un comportamiento similar entre navegadores Firefox y Galeón, también similar entre Konqueror e IE y con ciertas variantes tenemos a Opera.

Podemos concluir, con un porcentaje de acierto mí­nimo, que serí­a suficiente con definir un tamaño de fuente relativo (x.ej. 1em) para los input. Si se ha definido un tamaño de fuente en el cuerpo (font-size), el tamaño de fuente del control de formulario se redimensionará adecuadamente, y si no se ha definido nada en el cuerpo, se adaptará al tamaño de texto del resto del documento.

body {
	font-size: 62.5%;
}
input {
	font-size: 1em;
}

Seguramente se observará una pequeña diferencia, según el navegador utilizado. Para terminar de rematar la faena se puede igualar el tipo de fuente, mediante su correspondiente declaración en el cuerpo.

body {
	font: 62.5% Arial,Verdana,sans-serif;
}
input {
	font-size: 1em;
}