Colorear una línea horizontal(o cómo los navegadores pueden llegar a liar las cosas)

Para colorear una línea horizontal y que ésta se vea coloreada en todos los navegadores necesitas el siguiente código:

hr {
/* Netscape 6/7, Mozilla, otros navegadores Gecko */
background-color:#0ff;
/* IExplorer */
color:#0ff;
/* Opera */
border: #0ff;
}

¿Por qué hay que declarar tres reglas distintas, una para cada navegador? Pues porque cada navegador interpreta de una manera ese tag. Para Netscape/Mozilla es un bloque y, por lo tanto, se debe rellenar con color de fondo; también se puede usar una imagen, definir bordes, etc. como un elemento de bloque cualquiera. Para Internet Explorer es un tipo especial de texto y se comporta como tal. Por ejemplo, Internet Explorer representará centrada una línea definida así:

hr {
color: #0ff;
width: 75%;
text-align: center;
}

Para Opera, en cambio, es el borde superior e izquierdo de un elemento de bloque. Por lo que el único color que se puede definir es el de ese borde.

A ver cuándo aparece un estándar que les obligue a ponerse de acuerdo.

2 comentarios

[D4 - 11 de enero de 2004 - 23:51]

La verdad es que yo no uso hr's ya. Aprovecho los bordes de los bloques para simularlas, así se ve más o menos en todos igual y ahorro bits en el archivo css.

['k a o D - 11 de enero de 2004 - 02:28]

A mí personalmente me gusta más la forma que tiene el IE de interpretarlo (Por una vez Microsoft hace algo bien :P)