无法覆盖Chrome 12中的<meter>样式

Question

我刚刚升级到Chrome 12,我注意到我的"米"造型不再适用于镀铬.

我使用的是:

meter::-webkit-meter-horizontal-optimum-value,
meter::-webkit-meter-horizontal-suboptimal-value,
meter::-webkit-meter-horizontal-even-less-good-value {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cea), to(#7a3));
}

它工作正常,直到我更新到Chrome 12.

有趣的是,我无法再使用Web检查器查看这些伪元素的用户代理样式,即使在我访问的其他站点上也是如此.举个例子,检查Bruce Lawson的实验:

http://people.opera.com/brucel/dev/html5-meter-style.html

我也尝试过webkit trac页面上的用户样式表:

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

是否有一种新方法可以在Chrome中设置米的样式？

Answer 1

我向 Chrome 开发团队提交了一个错误，结果发现 Chrome 12+ 要求您使用“-webkit-appearance: none”重置默认的用户代理样式，然后才能使用自己的样式覆盖该元素。

更具体地说，需要添加以下规则：

meter { -webkit-appearance: none; }

这是门票的链接： http://code.google.com/p/chromium/issues/detail ?id=86009

这是一个 jsFiddle： http: //jsfiddle.net/F8tJu/1/