Firebug声称没有样式的文本框是边框：3px inset＃F0F0F0;
但是，<input type="textbox" style="border: 3px inset #F0F0F0;" />和<input type="textbox" />会产生截然不同的边框。这里发生了什么？
在Safari，Chrome和Firefox中都是如此 - 我没有IE，所以我不知道这个。
答案 0 :(得分：4)
它应该如何工作：如果appearance / -moz-appearance / -webkit-appearance属性设置为none以外的其他属性 - 就像<input type="text">一样在浏览器的默认样式表中 - 然后丢弃元素的正常CSS边框/背景，以支持特定于平台的主题，这可能与具有主题的平台上的普通旧CSS提供的平面3D对象看起来不同。
<div style="-moz-appearance: textfield">x</div>
<input style="-moz-appearance: none" value="x"/>
奇怪的，尽管我可以告诉无记录的问题是，如果在一个元素上设置了任何background或border规则，那么{{1} }被忽略并且-moz-appearance被替换，导致您在示例中看到的平面3D边框样式，这是没有主题的输入。
即使规则不会导致这些样式的计算值与没有它们时存在的样本值不同，也是如此。只有none可以避免触发此行为。
（IE表现相似，但它没有暴露background: default; border: default风格。此外，XP / 2000'经典'主题的用户也不会看到差异，因为IE呈现CSS appearance / inset border-styles以这种方式匹配'经典'Windows风格。）
答案 1 :(得分：1)
不同操作系统上的不同浏览器将具有各种默认表单控件样式以匹配操作系统的UI。一旦你开始设置任何表单元素的样式，你就会注意到浏览器也会添加它自己的默认样式（你可以覆盖它）。
Firebug可能只是报告文本框的特定默认浏览器样式，但它不可见，因为它们不是该元素的其他样式，因此正在使用OS UI。