CSS 如何在 webkit 浏览器上设置按钮（输入元素）的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10976700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the height of an button (input-element) on webkit browsers?
提问by MI5
On my Mac with webkit-browsers (Safari and Chrome, current version) I can't set the height of an input-element.
在带有 webkit 浏览器（Safari 和 Chrome，当前版本）的 Mac 上，我无法设置输入元素的高度。
<input type="button" style="height:200px;" value="Hello World!">?
won't work.
不会工作。
jQuerys $('input').css('height','200px');?won't work either.
jQuerys$('input').css('height','200px');?也不会工作。
Though setting the width is possible, either with style-attribute or with jQuery.
尽管可以使用 style-attribute 或 jQuery 设置宽度。
What is the reason for this inconsistency? And what is a possible solution?
这种不一致的原因是什么？什么是可能的解决方案？
回答by banzomaikaka
Display inline-block does nothing, as inputs already have that display set by default. Add border:none. When you do so, it starts behaving like you want it to. Here's the fiddle -> http://jsfiddle.net/joplomacedo/XmS6m/1/
Display inline-block 什么都不做，因为输入已经默认设置了该显示。添加border:none. 当你这样做时，它开始表现得像你想要的那样。这是小提琴 - > http://jsfiddle.net/joplomacedo/XmS6m/1/
回答by Madara's Ghost
Button is an inline-level element. You need to change that to blockor inline-block:
按钮是内联级元素。您需要将其更改为block或inline-block：
#my_button { display: inline-block; height: 200px; }
回答by Rusty
You can also increase the font-size of the button to enlarge it.
您还可以增加按钮的字体大小以放大它。
回答by Lukas Kalbertodt
Try setting the box-sizingproperty to content-box:
尝试将box-sizing属性设置为content-box：
.my-button {
box-sizing: content-box;
height: 200px;
}
