CSS 在 Chrome 中读取不正确 - width/color 需要 webkit？

Question

我有一个网页，我正在为地图创建图例。它在 Edge 中呈现完美，但由于某种原因只能在 Chrome 中正确呈现两个项目。

基本上，我扩大了图例的宽度属性以便可以清楚地看到整个图例项名称，并且我添加了一个新的图例项来描述橙色。

我附上了正确的图例（在边缘呈现）和问题图例（在 Chrome 中呈现）。据我所知，Chrome 应该能够在不使用 webkit 的情况下读取宽度和背景颜色，所以我不确定问题出在哪里。

Good legend

Bad legend

请注意 - 它正确呈现绿色和灰色图例项目，但不会出于任何原因呈现橙色。 class "legend-color" 必须用一些东西初始化，所以在用适当的颜色覆盖之前使用黑色。

有问题的 classes（主要是“.legend-color orange”和 "legend-item"）在 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>

Answer 1

根据运行 Whosebug 中提供的代码，Chrome 正在按应有的方式呈现。您可能存在缓存问题，可以通过硬刷新 (Shift+F5) 或在 Chrome 中打开检查器并在网络选项卡下禁用缓存来解决。

如果未使用，您可能不需要在 .legend-color class 中指定黑色背景颜色。

CSS 在 Chrome 中读取不正确 - width/color 需要 webkit？

CSS not reading correctly in Chrome - need webkit for width/color?

css

google-chrome

width

background-color