Html 缺陷Mac上的Chrome忽略提交按钮字体大小

有时候你觉得自己快要疯了。这是其中的一次。
在工作中，我遇到了一个无法更改提交按钮字体大小的问题。在我发疯后，我把它归结为一个简单的例子：

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

我正在使用Mac电脑，这个结果来自Chrome。 -Firefox按预期工作 -我在网上制作或访问的其他页面也可以，但是这个基本示例和我现在正在处理的页面都显示了这种行为

哪种数字或字体大小单位无关紧要。其他值（如填充）也会被忽略。但宽度不会被忽略。
在chrome开发工具中更改字体大小时，按钮会从当前字体大小闪烁到较小的字体大小，但会立即跳回。即使如此，在这种情况下，它至少应该闪烁成一个大的。 如果我们把它换成另一个标签呢？现在它工作了。
如果我们只是将类型从submit更改为text呢？它的行为又如预期的那样。 如果我们去掉其他的标签，比如身体和身体等等，会怎么样？没关系

更新模因。没有变化

这怎么可能是一件事呢？ 更不用说其他页面可能使用提交按钮。但我在JSFIDLE中尽可能简单地将这个示例恢复到最低限度，甚至使用内联CSS（因为！important什么也没做）。

尝试使用

-webkit-appearance: none;

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

除了解决方案之外，您还可以通过设置

-webkit外观：none

，或者如果不想添加特定于浏览器的CSS，则通过覆盖其中一个供应商样式来解决此问题。显然，覆盖任何供应商样式（请参见下面的测试样式列表）将完全删除按钮样式。我以前从未遇到过这个问题，因为我通常在设计按钮样式时更改背景和边框

示例：

这确实起到了作用。我忘了试试这个。当然，它没有真正解释为什么会发生这种情况，为什么只在Mac上，为什么只在某些页面上。默认的用户代理样式有：

input[type=“button”i]、input[type=“submit”i]、input[type=“reset”i]{-webkit外观：按钮；用户选择：无；空白：pre；}

。您甚至可以将

按钮

更改为

按钮

，它会工作。就在这之前，我在一个表单上工作，按钮是蓝色的，我没有这个问题。这就是原因。很疯狂。

-webkit-appearance: none;