html - 为什么progress {border:0}去掉默认外观?

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 的网络检查器表明该元素最初没有边框宽度。

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

progress { border: none }

...Chrome 不受影响，但 FF 和 Opera 是一样的。

顺便说一句，这个基本的酒吧如何设计？此类事物（以及其他，例如样式input[type=file]）的文档在哪里存在？

---

屏幕截图：
第一个进度条始终是原生的非样式变体。

铬 23、Windows 8：

IE 10、Windows 8：

Chrome 23、Mac OS X 10.6.8：

火狐 15、Mac OS X 10.6.8：

歌剧 12，Mac OS X 10.6.8：

Answer 1

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

许多 UI 组件（例如<input>、<button>、<select>等<progress>）都呈现为本机控件。但是，如果将任何演示样式应用于它们，例如background-color, border... 那么它们就不能在本地呈现，因此由浏览器使用给定样式手动完成。因此，它们可能看起来与它们通常的样子非常不同。

Answer 2

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

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

请参阅部分，jQuery UI 进度条示例