为什么progress {border：0}会删除<progress>的默认外观？</progress>

Question

经过测试： Chrome 23，Firefox 15，Opera 11（没有IE10或Safari 6）

使用此HTML：

<progress value=3 min=1 max=10></progress>

和这个CSS：

progress { border: 0 }

...元素的默认浏览器呈现消失。相反，它被一个基本的酒吧所取代。 Firebug和Chrome的Web检查器表明该元素最初没有边框宽度。

奇怪的是，如果0替换为none：

progress { border: none }

... Chrome不受影响，但FF和Opera是相同的。

顺便说一下，这个基本栏怎么样？这类事物的文档（以及其他类型，例如样式input[type=file]）在哪里存在？

<小时/> 的屏幕截图：
第一个进度条始终是本机的unstyles变体。

Chrome 23，Windows 8：

IE 10，Windows 8：

Chrome 23，Mac OS X 10.6.8：

Firefox 15，Mac OS X 10.6.8：

Opera 12，Mac OS X 10.6.8：

Answer 1

出于同样的原因，将该样式应用于<button>使其不再像原生按钮一样。

许多UI组件（例如<input>，<button>，<select>，<progress>等都会呈现为本机控件。但是，是否有任何演示样式应用于它们，例如background-color，border ...然后它们无法原生呈现，因此由浏览器使用给定样式手动完成。因此，它们可能与通常情况有很大不同。

Answer 2

可能与它如何杀死输入按钮/提交样式的原因相同。它们以特殊的方式呈现（我知道这不是正确的单词），所以一旦你改变它们的默认样式它们就会被破坏。

我建议你坚持jQuery UI，唯一的缺点是额外的千字节。您可以为更广泛的用户提供相同的功能和服务。外观

请参阅jQuery UI Progressbar Examples

部分