为什么<button>背景颜色在应用边框后立即在浏览器中变得不一致

Question

如我的jsfiddle演示所示，没有任何样式的按钮background-color在所有浏览器中看起来都是一致的 - 白色。

但是，只要添加border，background-color就会在浏览器之间变得不一致（我在macOS 10.12.6上测试过）：

• white in chrome 62.0.3202.94，这是预期的
• FF 57.0中的浅灰色，略显意外
在野生动物园11.0.1中
• 深灰色，这是非常意外的

有人可以向我解释原因吗？这是野生动物园的错误吗？

Answer 1

这是因为，一旦指定了border，<button>元素的本机外观（具有操作系统外观的元素）就会被禁用，而全新的默认外观将是已应用。

不幸的是，不同的浏览器对这种“新外观”的含义有不同的解释-Safari为此“新外观”选择将按钮背景定义为“深灰色”，这不是错误。< / p>

根据an announcement of WebKit in 2005：

  

指定背景/边框将导致Aqua外观被禁用，并使用与平台无关的外观。

因此，border属性可以像开关一样使用-可以在两种外观模式之间转换按钮的开关：一个是操作系统级别的按钮，具有立体感，但难以自定义。另一个是平台无关的，简单但易于应用的CSS。

实际上，这是Bootstrap定制按钮样式的方式。在Bootstrap的_buttons.scss源代码中，.btn按钮类具有一个border的{​​{1}}属性-一个看不见的边框，它将触发平台中立模式以使用进一步的CSS规则。