如我的jsfiddle演示所示，没有任何样式的按钮background-color在所有浏览器中看起来都是一致的 - 白色。
但是，只要添加border，background-color就会在浏览器中变得不一致（我在macOS 10.12.6上测试过）：
有人能解释一下为什么吗？这是野生动物园的错误吗？
这是因为一旦指定了border，就会禁用<button>元素（具有操作系统外观和感觉的元素）的原生外观，并且将应用全新的默认外观。
不幸的是，不同的浏览器对这种“新外观”应该是什么有不同的解释--Safari选择将按钮的背景定义为“深灰色”以获得这种“新外观”，这不是一个错误。
据an announcement of WebKit in 2005说：
指定背景/边框将导致Aqua外观被禁用，并且使用更平台中性的外观。
因此，border属性可以像开关一样使用 - 一个可以在2种外观模式之间转换按钮的开关：一种是操作系统级按钮，它是立体的但很难定制。另一个是平台中立，简单但易于应用CSS。
实际上，这就是Bootstrap自定义按钮样式的方法。在Bootstrap的_buttons.scss源代码中，.btn按钮类具有border属性1px solid transparent; - 一个不可见的边框，它将触发平台中立模式以进一步的CSS规则。