虫子？ Mac上的Chrome忽略提交按钮的字体大小

Question

有时您认为自己会发疯。这一次。
在工作时，我遇到一个问题，无法更改提交按钮的字体大小。然后疯了之后，我将其简化为以下简单示例：

https://jsfiddle.net/zf9sq2gx/

font-size: 100px;

我确信这在您的机器上看起来很好，但在我的机器上却不行。 看到：

我在这里使用Mac，结果来自Chrome。  -Firefox正常工作  -我制作或在线访问的其他页面都可以工作，但是这个基本示例和我现在正在处理的页面都表现出这种行为。

哪个数字或字体大小单位都没有关系。其他值（例如padding）也将被忽略。但是宽度不会被忽略。
在chrome开发工具中更改字体大小时，按钮从其当前的字体大小闪烁到较小的字体大小，但立即跳回。即使在这种情况下，它至少也应该闪烁到一个大的。 如果我们将其完全更改为其他标签怎么办？现在可以了。
如果我们只是将类型从提交更改为文本怎么办？它的行为再次符合预期。 如果我们甚至删除其他标签，例如body和form以及所有内容，该怎么办？没关系。

更新模因。不用找了。

这怎么可能是一件事？ 更不用说其他页面可以使用提交按钮。但是我在jsfiddle中使这个示例尽可能简单，甚至可以使用内联CSS（因为！important没有执行任何操作），甚至可以回到最低限度。

Answer 1

尝试使用

-webkit-appearance: none;

它将取消按钮的默认镶边样式。

Answer 2

除了Petruk Dmitry's解决方案之外，如果您不想添加特定于浏览器的CSS，则可以通过设置-webkit-appearance: none或覆盖一种供应商样式来解决此问题。显然，覆盖任何供应商样式（请参阅下面的经过测试的样式列表）将完全删除按钮样式。我从来没有遇到过这个问题，因为我通常在设置按钮样式时会更改背景和边框。

示例：

<input type="submit" style="font-size: 60px;"><br />
<input type="submit" style="font-size: 60px; -webkit-appearance: none;" value="Webkit appearance"><br />
<input type="submit" style="font-size: 60px; background: blue;" value="background"><br />
<input type="submit" style="font-size: 60px; border: 1px solid green;" value="border">

编辑：（一些）关于此行为的更多信息可以在here中找到，尽管似乎该“功能”没有得到很好的记录。但是，有关该主题的更多信息，您可以查看this page。