如何样式化HTML5 标签

我在Webkit浏览器中使用以下代码对仪表进行了精细的渐变设计：

meter { -webkit-appearance: none; } //Crucial, this will disable the default styling in Webkit browsersmeter::-webkit-meter-bar {    background: #FFF;    border: 1px solid #CCC;}meter::-webkit-meter-optimum-value {    background: #87C7DE;    background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));    background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);    background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);    background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);    background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);}

但是，CSS-Tricks的Chris Coyier 建议使用以下HTML代码：

<div >    <span ></span></div>

…而不是HTML5

<meter>

<progress>

更糟糕的是，跨浏览器的情况差异很大，即使在不同的WebKit浏览器之间也是如此。伪元素也不一致。我讨厌这样挂东西，但这确实是另一个话题。可以这么说，对于这些特定的进度条，div
/ span是目前的问题。

浏览器只是不似乎真的准备好接受新的HTML5标准标签

<meter>

<progress>