css按钮字体大小不起作用

Question

除非我更改背景颜色，否则我无法获得输入按钮来更改其字体大小。

这个html：

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

和这个css：

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

结果如下：

与完全没有样式完全相同。

我对css所做的一切都没有改变它：使它成为60em;改变我如何选择它;它们都会产生相同的默认按钮。

我在Chrome中检查了它，风格实际上是在击中元素，而不是被覆盖：

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

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

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

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

结果如下：

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

编辑：@Hashem Qolami，感谢您将其发布在外部编辑器中，我应该这样做。当我查看你的JS bin时，它看起来像这样：

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

错误仅发生在Chrome，Safari和Opera上，仅在Mac上发生。

如果在Firefox for Mac和Windows上的所有浏览器（IE10，Chrome，Firefox，Safari和Opera）上正确呈现。

Answer 1

实际上，这只发生在基于 WebKit-MacOS 的浏览器上。似乎是一个WebKit限制，因此 Aqua外观始终如此。

  

只要为按钮启用了Aqua外观，就会忽略某些CSS属性。由于Aqua按钮不会缩放，因此不会尊重height属性。同样，字体和颜色自定义也不会受到尊重。按钮的首要原则是你永远不会看到一个“半Aqua”组合的按钮。按钮看起来完全是原生的，或者根本不是Aqua。

来源：https://www.webkit.org/blog/28/buttons

这解释了为什么设置背景会使font-size有效;它破坏了Aqua的外观。

Answer 2

@ pzin的回​​应让我开始走上正轨。他是正确的，任何打破aqua的东西都会完成它。在不必指定背景颜色的情况下处理它的推荐方法是这个坏男孩：

-webkit-appearance: button;

Answer 3

设置border属性也应该起作用。但是我认为-webkit-appearance: none;是最好的方法，因为它“关闭”了MacOS浏览器上的Aqua外观，因此，Aqua禁止CSS的其他任何形式的控件随后都可以使用您选择的CSS样式化。本来打算将此添加为评论，但没有足够的声誉; _ ;.