为什么提交输入样式不适用于 Chrome 和 Safari (Mac)，但仅适用于应用背景颜色？

Question

我有一个简单的网页，其中 CSS 样式规则不适用于表单按钮，如果我使用的是 Chrome 或 Safari（Mac OS X、Yosemite）。它确实适用于 Firefox。如果我使用 background-color 属性，它确实适用于 Chrome 和 Safari。

看下面的例子。该save按钮没有Roboto Mono字体，它应该是。仅当您在 Chrome 或 Safari 上打开页面时才会出现此问题。它在 Firefox 上运行完美。

最重要的是，如果我background-color在按钮上应用类似的样式，那么字体会Roboto Mono突然按预期工作，并且它也应用在按钮上。

这是我使用的代码。

http://jsbin.com/foqiso/edit?html,css,output

任何线索为什么按钮不采用指定的字体，但前提是

• 我在 Firefox 或
• 我在 Chrome 或 Safari 上，我应用了背景颜色

?

更新：还有另一种解决方法。<input type="submit" value="Save">如果我使用<button type=submit>Save</button>，而不是使用，则使用button我期望的字体进行样式设置。

Answer 1

它是您的 webkit 样式。添加这个：

input[type=submit]{
  -webkit-appearance: button;
}

这只是 Webkit

干杯