HTML/CSS: <a> - tag die CSS-Regeln w/ pseudoclasses rendering uneinheitlich

Bin ich gekommen, über ein Problem in letzter Zeit mit meinem web-design-Projekte wurde unbedeutend genug, um schlüpfen durch meine Finger, die lose ein paar mal, aber es ist einfach geworden, zu lästig.

Sagen, ich habe ein Stylesheet mit diesen Regeln:

a {
    outline: 0;
    text-decoration: underline;
}

a:link {
    color: #0099FF;
}

a:visited {
    color: #0099FF;
}

a:hover {
    color: #FFFF00;
}

a:active {
    color: #33FF66;
}

Links in meinem Dokument nur manchmal haben die richtigen Farben, aber manchmal werden Sie einfach die Standard-blau->lila links. Ich bin auf einem schwarzen hintergrund, so dass diese die schrecklich Aussehen.

Wenn ich die Seite aktualisieren, etwa die Hälfte der Zeit, die Sie korrekt gerendert wird. Das passiert sowohl in Firefox und Chrome.

Was ist Los?

  • Versuchen Sie die Kombination a:link, a:visited da Sie die gleiche Farbe?
  • Andere als vielleicht konsolidieren Sie Ihre :link und :visited zusammen, die css gut aussieht. Wie sind Sie einschließlich Ihrer css? Es klingt wie Ihre Seite ist manchmal das laden der css-Datei und manchmal nicht.
  • Ist es definitiv nur die <a> tags immer CSS angewendet inkonsistent, oder alle Elemente?
  • Holen Sie sich die Firebug-Erweiterung für Firefox - es ist ideal für das aufspüren von Sachen wie diese...
  • Könnten Sie mir sagen ein bisschen mehr über das set up, haben Sie eine farm von Servern? Ist es nur die link-Farben, die betroffen sind? oder gibt es weitere Stile, die den Rückgriff auf eine andere/ Standard-style?
InformationsquelleAutor Mike Turley | 2011-03-31
  1. 4

    Wenn Sie derzeit die Entwicklung von css, es ist sehr möglich, dass der Browser eine zwischengespeicherte version der falschen version des Stylesheet, das würde erklären, warum die links nicht richtig angezeigt.

    Versuchen Sie Folgendes :
    In Ihrem link auf die css-fügen Sie eine query-string mit Müll Werte. Dies zwingt die re-download der css-und sehen Sie, wenn Sie Ihre Regeln konsequent anwenden. Wenn Sie es tun, dann wissen Sie, es ist ein caching-problem. Verlassen Sie die Abfrage-string wie er ist, und Ihre Benutzer re-download der css.
    Wenn nicht, dann hast du ein css-problem. Download firebug for firefox, überprüfen Sie einer der links nicht angezeigt, die richtige Farbe und sehen, welche Regeln für Sie gelten.

    Hier ist, wie Sie möchten, fügen Sie dem query-string : 

    <link rel="stylesheet" type="text/css" href="style.css?v=3">
    • Hugo, ich dachte, das ein browser Lesen style.css und style.css?ver=3 als anders, aber nicht re-downloaden Sie das stylesheet, wenn es kommt auf das gleiche query-string. Bis Sie Sie ändern. Denkst du anders?
    • Sie sind richtig (soweit ich weiß). Müssen Sie ändern Sie die Abfrage-string, wenn Sie wollen, um den cache ungültig.
    • Oh gut. Ich war besorgt, für einen moment, dass jede Website die ich gebaut habe wurden in diesem Jahr laden der css bei jedem refresh. danke.
    InformationsquelleAutor Hugo Migneron
  2. 1

    Natürlich ist dies eine alte post, aber ich habe erlebt die gleichen Probleme in letzter Zeit.
    Nach einigen Stunden suchen habe ich endlich realisiert, dass mein markup-Code war ungültig, weil mit der folgenden syntax:

    <a href="somlink"><i>my link text</i></a>

    Macht dies perfekt in allen Browsern, aber natürlich auch das " a " - Wahlschalter in mein Stylesheet nicht genug war.
    In diesem Fall brauchte ich die folgenden:

       a i, a:hover i, a:visited i
   {
       some rule....
   }

    Hoffe dies kann jemand helfen...

    InformationsquelleAutor jhfelectric
  3. 0

    Klingt sehr seltsam.

    Zuallererst würde ich eine color auf Ihre Basis a entsprechend Ihrer a:link und a:visited:

    a {
    outline: 0;
    text-decoration: underline;
    color: #0099FF;
}

    Dies sollte gelten für alle Anker-Tags, die es findet. wenn Sie ein Anker-tag ohne die href-die a:link nicht gelten.

    InformationsquelleAutor Luke Duddridge
Schreibe einen Kommentar