为什么更改按钮的“背景颜色”也会改变其他样式？答案

【问题标题】：why does changing the `background-color` of a button change other styles too?为什么更改按钮的“背景颜色”也会改变其他样式？
【发布时间】：2014-11-17 22:53:54
【问题描述】：

http://codepen.io/anon/pen/KwKOaz

仅更改 background-color 会显着更改按钮元素的样式，特别是 border 样式。

这发生在 Mac 上的 chrome、safari 和 firefox 上。为什么会这样？如何安全地更改其背景颜色？

【问题讨论】：

在 Windows 7 上看不到这种行为，Chrome... 按钮看起来相同，除了背景颜色，正如您所期望的那样。您是否尝试过使用background 代替background-color？
是的，我试过了。
ubuntu 上的类似结果
注意：仅更改按钮上的margin 显然不会产生这种效果。 padding 但是确实会触发设计更改。

标签： css

【解决方案1】：

浏览器供应商将自定义样式应用于按钮和输入字段等 UI 元素。更改其中一个被覆盖的属性也会导致禁用该元素上的所有其他供应商样式。如果你想改变一个属性，恐怕你也必须改变其他属性。

很遗憾，我无法告诉您他们为什么这样做 - 可能背后有一些规范，但我找不到任何证据。

【讨论】：

【解决方案2】：

当所有样式都保持不变时，浏览器使用主机操作系统的给定 API 来呈现给定控件。这将使控件看起来是平台原生的，但是如果您对该控件/元素应用任何样式，浏览器不能保证给定的样式可以应用于给定的平台，所以它默认回到一个简化的、完全 css 的解决方案.

另请注意，样式控制元素虽然有效，但尚未包含在稳定标准中。

例如，NSButton（OS X 中按钮后面的本机控件）没有设置背景颜色的选项，因此浏览器面临着一项不可能完成的任务。在 Windows 上，您可以更改背景颜色，这就是人们报告在 Windows 上看不到您的问题的原因。

【讨论】：

也发生在 Windows 上。
@Christoph 行为取决于浏览器、操作系统版本以及操作系统主题。

【解决方案3】：

有时 CSS 样式会被继承。但是，您正在将样式应用到 HTML 中的所有内容。就我个人而言，除了重置或规范化 CSS 之外，我不会对 body 应用任何东西。也就是说，您可以使用 CSS 选择器运算符和\或 id/classes 来最小化：

http://www.w3schools.com/cssref/css_selectors.asp

例子：

html

顺便说一句，不要写这样的 html 更容易阅读

<body>
    <div class="wrapper">
          <button class="all-btns red">
              Cancel
          </button>

          <button class="all-btns green">
               Save
          </button>
    </div>
</body>

css

.div.wrapper {
    width: 100%;
    height: auto;
    background: #efefef;
}

.all-btns {
    border: solid 1px #000; 
    width: 50px;
    line-height: 48px;
    height 35px;
    color: #fff;
}

.btn.red {
    color: #fff;
    background: red;
}
.btn.green {
    background: green;
}

【讨论】：

嗯？这与问题有什么关系？