YUI Réinitialiser CSS fait que <strong><em>cela ne fonctionne pas</em></strong>

StackOverflow https://stackoverflow.com/questions/20107

  •  09-06-2019
  •  | 
  •  

Question

Cette ligne dans YUI Réinitialiser le CSS ça me pose problème :

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

Cela fait mon em pas en italique et mon strong pas audacieux.Ce qui est bien.Je sais comment remplacer cela dans ma propre feuille de style.

strong, b 
{
  font-weight: bold;
}

em, i 
{
  font-style: italic;
}

Le problème survient lorsque j'ai un texte à la fois em et strong. 

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

Ma règle pour strong le rend audacieux, mais la règle de YUI pour em ça rend les choses à nouveau normales.Comment puis-je résoudre ce problème ?

Était-ce utile?

La solution

Si votre déclaration forte intervient après celle de YUI, la vôtre doit la remplacer.Vous pouvez le forcer comme ceci :

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

Si vous prenez toujours en charge IE7, vous devrez ajouter !important.

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

Cela fonctionne - voyez par vous-même :

/*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>

Autres conseils

J'utiliserais cette règle pour remplacer la réinitialisation de YUI :

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

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

Si en plus d'utiliser YUI reset.css, vous utilisez également YUI base.css, vous disposerez alors d'un ensemble standard de styles de base multi-navigateurs.

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

J'ai eu un problème similaire lorsque j'ai ajouté la réinitialisation YUI en haut de mon fichier CSS d'origine.J'ai trouvé que la meilleure chose pour moi était simplement de supprimer tous les

font-weight: normal;

déclarations de YUI Reset.Je n'ai pas remarqué que cela ait affecté quoi que ce soit "entre navigateurs".

Toutes mes déclarations ont eu lieu après la réinitialisation de YUI, donc je ne sais pas pourquoi elles n'ont pas pris effet.

Tant que vos styles sont chargés après ceux réinitialisés, ils devraient fonctionner.De quel navigateur s'agit-il ?parce que je travaille moi-même de la même manière et que je n'ai pas rencontré ce problème, je me demande si quelque chose est en cause dans mes tests.

Il est préférable d'utiliser les feuilles de style de réinitialisation comme base.Si vous ne souhaitez pas les réinitialiser ou les renforcer, supprimez-les de la feuille de style.

Comme Chris l'a dit, vous n'êtes pas obligé d'utiliser exactement le CSS qu'ils fournissent religieusement.Je voudrais simplement enregistrer une copie sur votre serveur et la modifier selon vos besoins.

Je suggérerais d'éviter tout ce qui implique le piratage des fichiers YUI.Vous devez pouvoir mettre à jour les bibliothèques externes à l'avenir et si votre site s'appuie sur des versions éditées, il y a de fortes chances qu'il soit perturbé.Je pense qu'il s'agit d'une bonne pratique générale pour toute bibliothèque tierce que vous utilisez.

Donc je pensais ce la réponse était parmi les meilleures

Si en plus d'utiliser YUI reset.css, vous utilisez également YUI base.css, vous disposerez alors d'un ensemble standard de styles de base multi-navigateurs.

J'entends ce que vous dites.Je suppose que vous pouvez ajouter une règle CSS comme celle-ci :

strong em { font-weight: bold; }

ou:

strong * { font-weight: bold; }

Je pensais avoir une solution idéale :

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

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

Malheureusement, Internet Explorer ne prend pas en charge «l'héritage». :-(

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top