ChromeでCSSが正しく読み込まれない - 幅/色のウェブキットが必要ですか？

Question

マップの凡例を作成するWebページがあります。 Edgeでは完璧にレンダリングされますが、何らかの理由でChromeで2つのアイテムが正しくレンダリングされます。

基本的に、凡例の幅プロパティを拡張して、凡例項目名全体がはっきりと見えるようにしました。新しい凡例項目を追加して、オレンジ色を説明しました。

正しい凡ての凡例（端に表示）と問題の凡例（Chromeで表示）を添付しました。私が知る限り、ChromeはWebkitを使用せずに幅と背景色を読み取ることができるはずです。そのため、問題の原因がわかりません。

Good legend

Bad legend

に注意してください - それは正確にグリーンとグレーの凡例項目をレンダリングしますが、何らかの理由でオレンジ色に表示されません。クラス "legend-color"は何かで初期化されなければならないので、黒は適切な色で上書きされる前に使用されます。

CSSにおける質問（主に ".legend色オレンジ" および "凡例項目"）のクラス：stackoverflowの内部に設けられたコードを実行すると

.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>

Answer 1

、クロムでありますレンダリングする必要があります。ハードリフレッシュ（Shift + F5）で解決するか、Chromeでインスペクタを開いてネットワークタブでキャッシュを無効にすることで解決できるキャッシュの問題がある可能性があります。

.legend-colorクラスで黒の背景色を指定する必要はないかもしれません。