HTML 输入按钮 css-height 不适用于 Safari 和 Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12450776/
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
HTML input button css-height not working on Safari and Chrome
提问by Madeline
I have a very basic question. I am setting height to 50px for my html form submit button. It works on Firefox but not Chrome nor Safari. The code is as simple as following:
我有一个非常基本的问题。我将 html 表单提交按钮的高度设置为 50px。它适用于 Firefox，但不适用于 Chrome 或 Safari。代码很简单，如下所示：
<input type="submit" value="Send" style="height:50px;" />
Any idea how to make it work on Chrome and Safari?
知道如何让它在 Chrome 和 Safari 上工作吗？
回答by MeltingDog
Change it from <input>to <button>and add -webkit-appearance: none;to the start of your CSS, eg:
将其从 更改<input>为<button>并添加-webkit-appearance: none;到 CSS 的开头，例如：
.submitbtn {
-webkit-appearance: none;
height: 50px;
background-color:#FFF;
color:#666;
font-weight:bold;
border: solid #666 1px;
font-size: 14px;
}
回答by Sachin Rana
Just adding -webkit-appearance: none;on my <input>worked for me on safari browser on Macbook.
只需添加-webkit-appearance: none;我<input>在 Macbook 上的 Safari 浏览器上为我工作的内容。
回答by ???ω?
This should be working also.
这也应该有效。
-webkit-appearance:default-button;
There are quite a few parameters for this property that you may want to take advantage of and/or watch out for. Also, If you simply wanted to disable inner-shadows of input fields you could just use -webkit-appearance:caret;.
您可能想要利用和/或注意此属性的许多参数。此外，如果您只是想禁用输入字段的内部阴影，您可以使用 -webkit-appearance:caret;。
button
button-bevel
caret
checkbox
default-button
listbox
listitem
media-fullscreen-button
media-mute-button
media-play-button
media-seek-back-button
media-seek-forward-button
media-slider
media-sliderthumb
menulist
menulist-button
menulist-text
menulist-textfield
none
push-button
radio
searchfield
searchfield-cancel-button
searchfield-decoration
searchfield-results-button
searchfield-results-decoration
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
square-button
textarea
textfield
回答by vike
Adding to ???ω?'s (upvoted)answer:
@ Safari 11.0.2 (13604.4.7.1.3) @ macOS 10.13.2 (17C88)
e.g.
@ Safari 11.0.2 (13604.4.7.1.3) @ macOS 10.13.2 (17C88)
例如
input[type=button]{
-webkit-appearance: button;
}
solved my issue (of only -sizeof mostly [-webkit-]font-* having very limited effect);
overriding "User Agent Stylesheet":
解决了我的问题（-size主要是 [ -webkit-] font-* 效果非常有限）；
覆盖“用户代理样式表”：
input:matches([type="button"], [type="submit"], [type="reset"]){
-webkit-appearance: push-button;
}
