Html css按钮字体大小不为'；行不通

除非我改变背景色，否则我无法让输入按钮改变其字体大小

此html：

<input type="button" id="startStop" value="start" />

结果是：

这与没有任何样式完全相同

我对css所做的任何事情都不会改变它：将其设置为60em；改变我选择它的方式；它们都会产生相同的默认外观按钮

我在Chrome中检查了它，该样式实际上击中了元素，并且没有被覆盖：

但不知何故，计算样式不起作用：

（整个文档的基本字体大小为1em。不，更改基本字体大小无效）

唯一改变字体大小的是，如果我给它一个背景色：

input#startStop{
    font-size: 3em;
    background-color: white;
}

结果如下：

有人能告诉我发生了什么事吗

编辑：@Hashem Qolami，感谢您在外部编辑器中发布它，这是我应该做的。当我看到你的JS垃圾箱时，它看起来是这样的：

编辑2：它是特定于浏览器的

该错误仅发生在Chrome、Safari和Opera上，并且仅发生在Mac上

---

如果在Firefox for Mac和windows上的所有浏览器（IE10、Chrome、Firefox、Safari和Opera）上正确渲染。

事实上，这只发生在基于WebKit MacOS的浏览器上。这似乎是一个WebKit限制，因此水族外观始终保持不变

只要按钮启用了Aqua外观，某些CSS属性就会被忽略。由于Aqua按钮不缩放，因此不会使用height属性。同样地，字体和颜色定制也将不受欢迎。按钮的首要原则是，你永远不会看到一个按钮是某种“半水”的混合物。要么按钮看起来完全是本地的，要么它根本就不是浅绿色的

资料来源：

---

这就解释了为什么设置背景会使

字体大小

起作用；它打破了水的外观。

@pzin的回答让我开始走上了正确的道路。他是对的，任何打破水的东西都会成功。不必指定背景色的推荐处理方法是：

-webkit-appearance: button;

---

设置

边框

属性也应该有效。但我认为

-webkit外观：无

将是最好的方法，因为它“关闭”了MacOS浏览器上的Aqua外观，因此Aqua禁止CSS的任何其他表单控件随后都可以根据您的CSS选择样式。本打算将此作为评论添加，但没有足够的声誉

请给我打电话。演示它或它没有发生。：）似乎没有问题：也不能重现问题。伙计，似乎没有问题。你可以发布一些额外的html吗？请参见编辑：@Hashem Qolami，当我查看你的JS Bin时，输入框看起来与默认值相同，增加字体大小的em没有任何效果。它保持不变。（编辑中的截图）你太棒了。你让我找到了正确的答案！

-webkit-appearance: button;