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.

这解释了为什么设置背景会font-size起作用; 它打破了Aqua的外观.

Answer 2

@pzin的回应让我开始走上正轨.他是正确的,任何打破aqua的事都会让它完成.不必指定背景颜色来处理它的推荐方法是这个坏男孩:

-webkit-appearance: button;