2008-08-21 9 views
9

Esta línea de YUI de Reset CSS está causando problemas para mí:YUI Restablecer CSS hace <strong><em>esto no funciona</em></strong>

address,caption,cite,code,dfn,em,strong,th,var { 
    font-style: normal; 
    font-weight: normal; 
} 

Hace que mi em sin cursiva, negrita mi strong no. Lo cual está bien. Sé cómo anular eso en mi propia hoja de estilo.

strong, b 
{ 
    font-weight: bold; 
} 

em, i 
{ 
    font-style: italic; 
} 

El problema viene cuando tengo el texto que a la vez em y strong.

<strong>This is bold, <em>and this is italic, but not bold</em></strong> 

Mi regla para strong hace que sea audaz, pero el gobierno de YUI para em hace que sea normal otra vez. ¿Cómo arreglo eso?

Respuesta

17

Si su fuerte declaración viene después de que YUI sea suya, debe anularla. Puede forzar de esta manera:

strong, b, strong *, b * { font-weight: bold; } 
em, i, em *, i * { font-style: italic; } 

Si todavía apoyo IE7 tendrá que añadir !important.

strong, b, strong *, b * { font-weight: bold !important; } 
em, i, em *, i * { font-style: italic !important; } 

Esto funciona - ver por sí mismo:

/*YUI styles*/ 
 
address,caption,cite,code,dfn,em,strong,th,var { 
 
    font-style: normal; 
 
    font-weight: normal; 
 
} 
 
/*End YUI styles =*/ 
 

 
strong, b, strong *, b * { 
 
    font-weight: bold; 
 
} 
 

 
em, i, em *, i * { 
 
    font-style: italic; 
 
}
<strong>Bold</strong> - <em>Italic</em> - <strong>Bold and <em>Italic</em></strong>

+1

+1 Debido a que esta es la respuesta correcta. El marcado como correcto no funciona en IE7 –

+0

Gracias, Scott. Tienes razón. El! Importante es necesario en IE7. –

2

Mientras sus estilos se cargan después de restablecimiento de los que deben trabajar. ¿Qué navegador es este? porque yo trabajo de manera similar y no me he enfrentado a este problema, me pregunto si es culpa de mi prueba.

7

me gustaría utilizar esta regla para anular el reinicio Yui:

strong, b, strong *, b * 
{ 
    font-weight: bold; 
} 

em, i, em *, i * 
{ 
    font-style: italic; 
} 
+2

Lamentablemente, esto parece no funcionar para IE7 –

6

Si además de utilizar reset.css YUI, también puede usar YUI base.css, entonces usted estará listo con un conjunto estándar de estilos de base de navegador cruzado.

LINK: http://developer.yahoo.com/yui/base/

+0

La base YUI no resuelve el problema. Hace fuerte negrita y en cursiva, pero no resuelve el conflicto cuando el mismo texto está envuelto en ambas etiquetas. –

3

que tenía un problema similar cuando he añadido el reinicio YUI a la parte superior de mi archivo de la CSS. Descubrí que lo mejor para mí era simplemente eliminar todas las declaraciones

font-weight: normal; 

del Restablecimiento YUI. No me he dado cuenta de que esto ha afectado a cualquier "navegador cruzado".

Todas mis declaraciones fueron después del reinicio de YUI, así que no estoy seguro de por qué no estaban teniendo efecto.

2

Las hojas de estilo de reinicio se utilizan mejor como base. Si no desea restablecer em o fuerte, elimínelos de la hoja de estilo.

2

Como dijo Chris, no tiene que usar el CSS exacto que proporcionan religiosamente. Solo guardaría una copia en su servidor y editaría según sus necesidades.

0

pensé que tenía una solución ideal:

strong, b 
{ 
    font-weight: bold; 
    font-style: inherit; 
} 

em, i 
{ 
    font-style: italic; 
    font-weight: inherit; 
} 

Por desgracia, Internet Explorer no es compatible "hereda". :-(

1

Sugeriría evitar todo lo que implique hackear los archivos YUI. Debe poder actualizar las bibliotecas externas en el futuro y si su sitio se basa en versiones editadas, existe una buena posibilidad de que se acumule. Creo que esta es una buena práctica general para cualquier biblioteca de 3 ª parte que utilice.

Así que pensé this respuesta fue uno de los mejores

Si además de utilizar reset.css YUI, también puede usar YUI base.css, entonces todo estará configurado con un conjunto estándar de estilos de base de navegador cruzado.

0

Veo lo que dice. Creo que se puede añadir una regla CSS como esto:

strong em { font-weight: bold; } 

o:

strong * { font-weight: bold; }