CSS in Chrome nicht richtig gelesen - Webkit für Breite/Farbe benötigt?

Ich habe eine Webseite, wo ich eine Legende für eine Karte erstellen. Er wird in Edge perfekt dargestellt, rendert jedoch aus irgendeinem Grund nur zwei der Objekte korrekt in Chrome.CSS in Chrome nicht richtig gelesen - Webkit für Breite/Farbe benötigt?

Grundsätzlich habe ich die width -Eigenschaft der Legende erweitert, so dass der gesamte Name des Legendenelements deutlich zu sehen ist und ich ein neues Legendenelement hinzugefügt habe, um die Farbe Orange zu beschreiben.

Ich habe die korrekt aussehende Legende (am Rand gerendert) und die Problemlegende (in Chrome gerendert) angehängt. Chrome sollte, soweit ich weiß, in der Lage sein, Breite und Hintergrundfarbe ohne Verwendung von Webkit zu lesen, daher bin ich mir nicht sicher, was das Problem ist.

Good legend

Bad legend

Bitte beachten Sie - es die grünen und grauen Legendenelemente richtig macht, wird aber Orange aus irgendeinem Grund nicht machen. Die Klasse "Legendenfarbe" muss mit etwas initialisiert werden, so dass Schwarz verwendet wird, bevor es mit der entsprechenden Farbe überschrieben wird.

Die Klassen in Frage (vor allem ".legend-Farbe orange" und "Legende Punkt") in CSS:

.legend-color { 
 
    width: 30px; 
 
    height: 20px; 
 
    background-color: black; 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 

 
.legend-color.green { 
 
    background-color: rgba(8, 107, 27, 0.70); 
 
} 
 

 
.legend-color.grey { 
 
    background-color: rgba(105, 105, 105, 0.70); 
 
} 
 

 
.legend-color.orange { 
 
    background-color: rgba(252, 140, 12, 0.70); 
 
} 
 

 
.legend-text { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 20px; 
 
    font-size: 16px; 
 
    padding-top: 2px; 
 
} 
 

 
.legend-item { 
 
    display: block; 
 
    position: relative; 
 
    width: 170px; 
 
    margin: 5px; 
 

 
The HTML that references above classes:

<div id="cip-states-map"> 
 
    <div id="cip-states-legend"> 
 
     <h1>Legend</h1> 
 
     <div class="legend-item"> 
 
      <div class="legend-color green"></div> 
 
      <p class="legend-text">Enrolled</p> 
 
     </div> 
 
     <div class="legend-item"> 
 
      <div class="legend-color grey"></div> 
 
      <p class="legend-text">In Development</p> 
 
     </div> 
 
     <div class="legend-item"> 
 
      <div class="legend-color orange"></div> 
 
      <p class="legend-text">Has &gt;1 Focal Area</p> 
 
     </div> 
 
    </div> 
 
    </div>

Quelle

2017-07-10 Stuff

Es funktioniert hier (von Ihrem Code-Snippet in meinem Chrome). Klicke mit der rechten Maustaste auf das "Orange" -Div und wähle "Inspect". Benutze dann die Dev Tools, um zu sehen, welche Stile Chrome zu verwenden gedenkt und woher sie kommen. –

Kann nicht reproduziert werden. Chrome 59. Tritt das Problem auf, wenn Sie die Seite auf einer Inkognito-Registerkarte öffnen? –

Schätzen Sie die Hilfe. Ich habe mich gründlich erfrischt und du hast recht ... alles läuft gut. – Stuff

Auf den Code in Stackoverflow vorgesehen läuft, Chrome Rendering wie es sein sollte. Möglicherweise liegt ein Caching-Problem vor, das durch eine harte Aktualisierung (Umschalt + F5) oder durch Öffnen des Inspektors in Chrome und Deaktivieren des Caches auf der Registerkarte "Netzwerk" behoben werden kann.

Sie müssen die schwarze Hintergrundfarbe in der .legend-color-Klasse wahrscheinlich nicht angeben, wenn sie nicht verwendet wird.

Quelle

2017-07-10 15:07:15 Erbilacx

Hm, du hast Recht. Seltsam. Ich bin ziemlich neu in CSS/HTML, also ist es eine große Hilfe zu wissen, dieses nächste Mal etwas Seltsames zu versuchen. Danke vielmals! – Stuff

In Chrome ist es immer gut, den Inspektor geöffnet zu lassen, wenn die Cache-Option deaktiviert ist. Auf diese Weise können Sie sicher sein, dass Sie die neueste Version sowohl von JavaScript als auch von Stylesheets sehen. – Erbilacx

CSS in Chrome nicht richtig gelesen - Webkit für Breite/Farbe benötigt?

Antwort

Verwandte Themen