YUI CSS zurücksetzen führt dazu, dass <strong><em>dies nicht funktioniert</em></strong>

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

  •  09-06-2019
  •  | 
  •  

Frage

Diese Zeile in YUIs CSS zurücksetzen bereitet mir Ärger:

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

Es macht mein em nicht kursiv und mein strong nicht fett.Was in Ordnung ist.Ich weiß, wie ich das in meinem eigenen Stylesheet überschreiben kann.

strong, b 
{
  font-weight: bold;
}

em, i 
{
  font-style: italic;
}

Das Problem tritt auf, wenn ich Text habe, der beides ist em Und strong. 

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

Meine Regel für strong macht es fett, aber YUIs Regel für em macht es wieder normal.Wie kann ich das beheben?

War es hilfreich?

Lösung

Wenn Ihre starke Erklärung nach der von YUI kommt, sollte Ihre diese überschreiben.Sie können es so erzwingen:

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

Wenn Sie immer noch IE7 unterstützen, müssen Sie hinzufügen !important.

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

Das funktioniert – überzeugen Sie sich selbst:

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

Andere Tipps

Ich würde diese Regel verwenden, um den YUI-Reset zu überschreiben:

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

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

Wenn Sie neben YUI reset.css auch YUI base.css verwenden, verfügen Sie über einen Standardsatz browserübergreifender Basisstile.

VERKNÜPFUNG: http://developer.yahoo.com/yui/base/

Ich hatte ein ähnliches Problem, als ich den YUI-Reset oben in meine Standard-CSS-Datei einfügte.Ich fand, dass es für mich das Beste war, einfach alles zu entfernen

font-weight: normal;

Erklärungen aus dem YUI Reset.Mir ist nicht aufgefallen, dass sich dies auf irgendetwas „browserübergreifend“ ausgewirkt hat.

Alle meine Erklärungen erfolgten nach dem YUI-Reset, daher bin ich mir nicht sicher, warum sie nicht wirksam wurden.

Solange Ihre Stile nach dem Zurücksetzen geladen werden, sollten sie funktionieren.Welcher Browser ist das?Da ich selbst auf ähnliche Weise arbeite und dieses Problem nicht aufgetreten bin, frage ich mich, ob es an meinen Tests liegt.

Als Basis eignen sich am besten Reset-Stylesheets.Wenn Sie em oder strong nicht zurücksetzen möchten, entfernen Sie sie aus dem Stylesheet.

Wie Chris sagte, müssen Sie nicht unbedingt genau das CSS verwenden, das sie bereitstellen.Ich würde einfach eine Kopie auf Ihrem Server speichern und sie entsprechend Ihren Anforderungen bearbeiten.

Ich würde vorschlagen, alles zu vermeiden, was das Hacken der YUI-Dateien beinhaltet.Sie müssen in Zukunft in der Lage sein, externe Bibliotheken zu aktualisieren, und wenn Ihre Website auf bearbeitete Versionen angewiesen ist, besteht eine gute Chance, dass sie fehlerhaft wird.Ich denke, dass dies eine allgemein bewährte Vorgehensweise für jede von Ihnen verwendete Bibliothek eines Drittanbieters ist.

Also dachte ich Das Die Antwort gehörte zu den besseren

Wenn Sie neben YUI reset.css auch YUI base.css verwenden, verfügen Sie über einen Standardsatz browserübergreifender Basisstile.

Ich verstehe, was Sie sagen.Ich denke, Sie können eine CSS-Regel wie folgt hinzufügen:

strong em { font-weight: bold; }

oder:

strong * { font-weight: bold; }

Ich dachte, ich hätte eine ideale Lösung:

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

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

Leider unterstützt Internet Explorer "Erben" nicht. :-(

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top