html - 在 Chrome 中无法正常工作

Question

我正在关注 this article关于创建密码强度计。这在 Firefox 中运行良好，但在 Chrome 浏览器中无法切换颜色。我尝试了伴随的 code pen demo也是，这似乎也不适用于 Chrome 浏览器。以下是 meter 元素的 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

Chrome 版本 52 中存在一个错误，该错误会导致仪表元素上的 -webkit-appearance:none; 清除彩色条本身。

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

从仪表中删除 -webkit-appearance 属性会导致显示彩色条。请参阅下面的 fiddle 示例:

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

编辑:上面的问题链接显示问题已解决。但是，这里已经重新打开了:https://bugs.chromium.org/p/chromium/issues/detail?id=632510