Chrome中移除CSS背景声明会导致按钮丢失同块字体样式

这确实是Chrome浏览器针对原生表单按钮的一个特殊渲染 quirks（小毛病），我来帮你拆解清楚：

问题重现 #

先看你的核心代码：

<style type="text/css">
  #btn1, .text1 {
    font-family: courier;
    font-size:   42px;
    /* background:  pink;  移除这行后btn1样式失效 */
  }
  #btn2, .text2 {
    font-family: arial;
    font-size:   42px;
    background:  cyan;
  }
</style>

<input type='button' id='btn1' onclick='alert("btn1")' value='Button1'> &nbsp;
<input type='button' id='btn2' onclick='alert("btn2")' value='Button2'> <p>
<input type='text' class='text1' value='Text1'> <p>
<input type='text' class='text2' value='Text2'>

现象完全符合你描述的：移除background: pink;后，#btn1的字体样式直接丢失，但.text1输入框完全正常；Firefox下没有这个问题，且只要存在背景属性（哪怕位置调换），按钮样式就正常。

原因解析 #

Chrome对原生<input type="button">这类表单控件的渲染有特殊逻辑：当你的样式中没有修改背景、边框这类“外观型”属性时，浏览器会倾向于使用内置的原生按钮样式（包括字体），哪怕你的选择器优先级更高（比如ID选择器）。而一旦你修改了背景/边框这类属性，Chrome会切换到“自定义渲染模式”，此时你的字体等样式就能正常应用。

这并不是CSS优先级的问题，而是Chrome为了保持原生控件的一致性做的特殊处理。

解决办法 #

有几种简单的方式可以绕过这个问题：

• 禁用原生外观：给按钮添加appearance: none;（加上浏览器前缀兼容旧版本），强制Chrome使用自定义样式：

  #btn1, .text1 {
    font-family: courier;
    font-size:   42px;
    -webkit-appearance: none;
    appearance: none;
  }
  

• 保留一个“无视觉影响”的背景属性：不需要粉色，用透明背景也能触发自定义渲染：

  #btn1, .text1 {
    font-family: courier;
    font-size:   42px;
    background: transparent;
  }
  

• 拆分选择器：把按钮和文本框的样式分开写，避免复合选择器触发Chrome的这个 quirks：

  #btn1 {
    font-family: courier;
    font-size:   42px;
  }
  .text1 {
    font-family: courier;
    font-size:   42px;
  }
  

以上三种方法都能解决Chrome中按钮样式失效的问题，你可以根据自己的需求选择。

内容的提问来源于stack exchange，提问作者golux