2011-01-19 16 views
6

Quizás me falta algo muy obvio, pero ¿por qué el siguiente HTML produce texto en la leyenda que aparece azul en Internet Explorer pero negro en otros navegadores?¿Por qué el color de texto de la etiqueta HTML Legend es diferente en IE vs otros navegadores?

<html> 
    <head> 
    </head> 
    <body> 
     <fieldset font-italic="True"> 
      <legend style="font-size: 24px; font-weight: bolder;">This is a test</legend> 
     </fieldset> 
    </body> 
</html> 

me gustaría que el color sea común entre cada navegador por lo que me he fijado explícitamente el color a negro. Pero tengo curiosidad de por qué hay una diferencia aquí.

Respuesta

5

Sin saber de qué IE específicamente está hablando, debe saber que cada navegador tiene su propio conjunto de atributos de estilo predeterminados que se aplican siempre que el diseñador no especifique explícitamente un estilo propio.

Una buena solución para este problema es emplear el restablecimiento de CSS, que reduce el estilo de cada elemento a prácticamente cero.

http://meyerweb.com/eric/tools/css/reset/

+1

¡Gracias por la respuesta! No pensé en usar una hoja de estilo de reinicio. Estoy usando hojas de estilo en todo mi sitio. También estoy usando IE8 pero los usuarios podrían estar usando cualquier versión. Entiendo que cada navegador implementa las cosas de maneras diferentes, pero supongo que me resulta extraño que IE elija azul para un color predeterminado como ese. – MisterXero

3

Navegadores diferentes = diferentes valores predeterminados. Esta es la razón por la cual algunas personas (pero no yo) usan una hoja de estilo de restablecimiento de CSS como this one from Yahoo.

EDIT:

No me gusta utilizar un reinicio, ya que añade un montón de reglas que es probable que no necesita y muchos que sobrescribirá, lo que crea un trabajo extra para el navegador del usuario (que probablemente se está ejecutando en una máquina más lenta que la tuya). Prefiero ser muy explícito en mi propio CSS para asegurarme de haber cubierto mis bases, pero no creo que haya nada de malo en usar uno si lo deseas.

+0

¡Gracias por el enlace! No he usado una hoja de estilo de restablecimiento antes, pero estoy usando hojas de estilo para todas mis páginas. Me resulta extraño que IE eligió usar azul como predeterminado y otros parecen usar principalmente negro. – MisterXero

+0

Los más grandes para recordar son los márgenes y los márgenes, IMO - do * {relleno: 0 margen: 0} en la parte superior de la hoja de estilos CSS - de esa manera puede configurar sus blocs y márgenes con la confianza de varios navegadores. –

2

También hay que tener en cuenta que la leyenda en el IE tiene un desplazamiento desde la izquierda de 7 píxeles :)

Se pueden corregir fácilmente esto diciéndole IE para tener un margen de leyendas con

margin: 0 -7px; 
+0

¡Gracias por el consejo! Recordaré eso. – MisterXero

Cuestiones relacionadas