如何在webkit浏览器上设置按钮（input-element）的高度？

Question

在我的Mac上使用webkit浏览器（Safari和Chrome，当前版本）我无法设置输入元素的高度。

<input type="button" style="height:200px;" value="Hello World!">​

无效。

jQuerys $('input').css('height','200px');​也不起作用。

http://jsfiddle.net/XmS6m/

虽然可以使用style-attribute或jQuery来设置宽度。

这种不一致的原因是什么？什么是可能的解决方案？

Answer 1

显示内联块不执行任何操作，因为默认情况下输入已经设置了该显示。添加border:none。当你这样做时，它开始表现得像你想要的那样。这是小提琴 - ＆gt; http://jsfiddle.net/joplomacedo/XmS6m/1/

Answer 2

Button是一个内联级元素。您需要将其更改为block或inline-block：

#my_button { display: inline-block; height: 200px; }

<强> Live Example

Answer 3

您还可以增加按钮的字体大小以放大它。

Answer 4

尝试将box-sizing属性设置为content-box：

.my-button {
  box-sizing: content-box;
  height: 200px;
}