Question

以下代码：

<input style="height: 80px; width: 200px;" value="test button">

在Windows，Linux等上运行良好。但Mac使用<input>标签的系统按钮样式。这些似乎无法获得自定义高度（Firefox会覆盖系统按钮样式，所以它很好，但Mac上的Chrome和Safari有以下问题）：

没有80px宽和200px高按钮，而是Mac按钮样式和顶部和下面的间隙。宽度设置得很好。

如何覆盖此设置，以便Mac上的Chrome和Safari显示一个高按钮？

编辑：这是Mac上发生的事情： Mac input{ height: 200px; } problem

这是应该发生的事情（适用于Windows，Linux）：

Normal input{ height: 200px; }

Answer 1

添加：

input[type=button] {
    -webkit-appearance: button;
}

你的CSS中的

： - ）

Here是此属性可以采用的所有值的列表。默认情况下，WebKit为按钮使用自定义样式（具有固定高度）。

Answer 2

添加type =“button”后尝试

<input style="height: 80px; width: 200px;" value="test button" type="button">