<meter>在Chrome中工作不正常

Question

我是跟随这篇文章创建密码强度计。这在Firefox中运行得很好，但在Chrome浏览器中没有切换颜色。我也尝试了附带的代码笔演示，这似乎也不适用于Chrome浏览器。以下是米元素的CSS样式：

meter {
    /* Reset the default appearance */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    margin: 0 auto 1em;
    width: 100%;
    height: .5em;

    /* Applicable only to Firefox */
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter::-webkit-meter-bar {
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }

请建议在Chrome中可能会发生什么变化，从而导致这种行为？我试着寻找供应商优先级中的任何更改，但都找不到。

Answer 1

在52版的Chrome中有一个错误，导致仪表元素上的-webkit-appearance:none;将彩色条本身擦掉。

https://bugs.chromium.org/p/chromium/issues/detail?id=602928

从计量器中删除-webkit-appearance属性将导致显示彩色条。请看下面的小提琴例子：

https://jsfiddle.net/t58fnan9/1/

编辑：上面的问题链接显示问题是固定的。然而，它已经在这里重新开放：https://bugs.chromium.org/p/chromium/issues/detail?id=632510

Answer 2

它真的为我展示了完美。更新浏览器，如果您是最新的，请清除缓存。