为什么progress {border:0}会删除<progress>的默认外观?

cha*_*les 5 html css

测试: Chrome 23,Firefox 15,Opera 11(没有IE10或Safari 6)

使用此HTML:

<progress value=3 min=1 max=10></progress>
Run Code Online (Sandbox Code Playgroud)

这个CSS:

progress { border: 0 }
Run Code Online (Sandbox Code Playgroud)

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

奇怪的是,如果0被替换为none:

progress { border: none }
Run Code Online (Sandbox Code Playgroud)

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

顺便说一句,这个基本栏怎么样?这类事物的文档(以及其他类型,如样式input[type=file])存在于何处?


屏幕截图:
第一个进度条始终是本机的unstyles变体.

Chrome 23,Windows 8:
Chrome 23,Windows 8

IE 10,Windows 8:
IE 10,Windows 8

Chrome 23,Mac OS X 10.6.8:
Chrome 23,OS X 10.6.8

Firefox 15,Mac OS X 10.6.8:
Firefox 15,OS X 10.6.8

Opera 12,Mac OS X 10.6.8:
Opera 12,OS X 10.6.8

Nie*_*sol 7

出于完全相同的原因,将该样式应用于a <button>使其看起来不再像本机按钮.

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