为什么提交输入样式不适用于 Chrome，也不适用于 Safari（Mac），但仅适用于我应用背景颜色？答案

【问题标题】：Why submit input style does not apply on Chrome neither on Safari (Mac), but only if I apply a background-color?为什么提交输入样式不适用于 Chrome，也不适用于 Safari（Mac），但仅适用于我应用背景颜色？
【发布时间】：2016-04-03 16:33:45
【问题描述】：

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

看下面的例子。 save 按钮没有 Roboto Mono 字体，因为它应该是。仅当您打开 Chrome 或 Safari 上的页面。它在 Firefox 上完美运行。

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

这是我使用的代码。

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

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

我使用的是 Firefox 或
我在 Chrome 或 Safari 上应用背景色

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

【问题讨论】：

标签： html css macos google-chrome safari

【解决方案1】：

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

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

这只是 Webkit

干杯

【讨论】：

哦哦。这是你给我的一个很好的暗示。但我认为更正应该是-webkit-appearance: button。你同意吗？这不会丢弃所有样式，而是按预期应用字体样式，我现在可以看到应用于按钮的“Roboto Mono”。如果您同意，请编辑您的答案，我会接受。
是的，button 也应该很棒（none 是基本的，按钮更适合现代浏览器而不是旧浏览器]，但也很好:)跨度>