Como corregir errores CSS en los navegadores web con Normalize.css

Algunos navegadores web interpretan incorrectamente algunas reglas de estilo CSS.
Esto afecta principalmente a elementos nuevos que proporciona HTML5 y provoca que no se muestren adecuadamente. Lo comprobamos en ocasiones al cargar nuestras páginas en diferentes navegadores, especialmente en ediciones y versiones que no son recientes y también en navegadores móviles.
Los que estén afectados de alguna forma por esta situación, pueden resolverlo y corregirlo usando Normalize.css, un grupo de reglas que se agrega al archivo css principal del sitio web.
En este artículo explicamos y mostramos como hacerlo.

¿Qué es Normalize.css y para que usarlo?

Normalize.CSS es un pequeño pero útil proyecto en Github, cuyo objetivo es lograr que todos los elementos de HTML5 se muestren correctamente en todas las versiones de los navegadores web.
Consiste en un sencillo archivo de estilo CSS, con las instrucciones para especificar el uso de cada elemento.
Es de extrema utilidad para lograr que todos los elementos se muestren correctamente, principalmente en los navegadores Internet Explorer, Edge y Safari.

¿Cómo usar Normalize.css en nuestras páginas?

Para usar esta herramienta solo necesitamos descargar el archivo en un ZIP desde la página del proyecto en Github.
En su interior contiene el archivo normalize.css y una página index con la que se comprueba su funcionamiento.
El archivo normalize.css contiene todas las instrucciones, las que están debidamente comentadas.
Podemos usarlo en su conjunto minimizándolo con nuestro Compresor CSS, para reducirlo y eliminar los comentarios y posteriormente agregarlo a nuestro archivo de estilo principal.
Más abajo se puede descargar una copia de normalize.min.css.
También podemos extraer solo las instrucciones necesarias, para corregir los elementos HTML que usamos frecuentemente en nuestras páginas.

Ejemplos prácticos del empleo de Normalize.css

En esta página de ejemplo agregamos en un script inline, solo algunas de las reglas de normalize.css, que se aplican a los elementos usados en la página.
Son las siguientes:
1- Corregir el interlineado (line height) en todos los navegadores y evitar el cambio de tamaño de la fuente (font size) después de cambiar la orientación de los dispositivos, usando el navegador Internet Explorer en Windows Phone y iOS.
Esta regla es de utilidad para todas las páginas.
La regla que es necesario agregar es la siguiente:

html {
line-height:1.15; 
-ms-text-size-adjust:100%; 
-webkit-text-size-adjust:100%;
}

2- Quitar la barra vertical que aparece en el elemento "textarea" en Internet Explorer.
Se puede comprobar en el siguiente elemento.

textarea {
overflow: auto;
}

3- Restaurar el tipo y el tamaño de fuente correcto en los elementos pre, code, kbd y samp en todos los navegadores.

pre, code, kbd, samp {
font-family: monospace, monospace; 
font-size: 1em; 
}

4- Corregir el interlineado al usar los elementos sub y sup en las páginas, en todos los navegadores.
El subíndice (sub) y superíndice (sup) son elementos muy empleados en paginas con fórmulas matemáticas.
Deben aparecer en tamaño más pequeño que la escritura normal y encontrarse ligeramente por debajo o por encima de la línea de escritura normal.
Por ejemplo: X ₂ - 567 ^[4]

sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {bottom: -0.25em;}
sup {top: -0.5em;}

5- Eliminar los bordes en las imágenes usadas dentro de enlaces en Internet Explorer 10.
Los que carguen esta página usando este navegador, no verán los feos bordes que el navegador agrega alrededor de imágenes, como en los botones de compartir en el encabezado o los que usamos en la parte inferior.

img {
  border-style: none;
}

Otros elementos de HTML5 que requieren corrección

Los anteriores son solo algunos ejemplos de las correcciones que podemos realizar usando normalize.css, para conseguir que todos los elementos se muestren de forma adecuada, en las páginas que publicamos.
Otros elementos de HTML5 que no usamos en nuestras páginas como article, aside, footer, header, nav, section, figure, abbr, dfn, dfn y muchos otros, requieren ser corregidos usando las reglas que proporciona esta útil iniciativa.