css按钮字体大小不起作用

Question

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

此html：

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

和此CSS：

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

结果：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS83QmEwZi5wbmcifQ==” alt =“输入按钮不会采用样式”>

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

我对CSS所做的任何更改都没有：将其设置为60em；更改我的选择方式；它们都导致使用相同的默认按钮。

我在Chrome浏览器中对其进行了检查，而样式实际上正在触及元素，并且没有被覆盖：

“ >>

但是以某种方式计算出的样式不起作用：

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

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

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9YSEVmei5wbmcifQ==” alt =“带有背景颜色”>“>

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

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9TNE04WS5wbmcifQ==” alt =“在此处输入图像描述”>

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

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

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

除非更改背景颜色，否则无法获得输入按钮来更改其字体大小。这个html：和这个css：input＃startStop {...

Answer 1

实际上，这仅发生在基于WebKit-MacOS

的浏览器上。似乎是WebKit的限制，所以Aqua外观

Answer 2

@@ pzin的回​​复使我开始走上正确的道路。他是对的，只要破水就可以完成。推荐的处理该问题而无需指定背景色的方法是这个坏男孩：

Answer 3

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