Html 如何在不同的浏览器中控制文本输入的高度并提交输入按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6184210/
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 can I control the height of text inputs and submit input buttons in different browsers?
提问by willdanceforfun
I have a very little but hard (for me) problem to solve.
我有一个很小但很难（对我来说）的问题要解决。
I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.
我有一个文本输入和一个提交按钮。我需要它们具有完全相同的高度，并且在 Chrome 和 Firefox 中也是如此，最好在 Internet Explorer 中也是如此。
HTML
HTML
<input type="text" name="email" /><input type="submit" value="?" />
CSS
CSS
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 9px;
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
}
I've setup this basic code on a jsfiddle here.
You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.
你应该注意到，如果你在 chrome 中加载它，按钮的高度小于文本输入，而在 Firefox 中，它更大。
What am I missing?
我错过了什么？
回答by RRStoyanov
Remove/add line-height: 18px;for both.
删除/添加line-height: 18px;两者。
回答by phihag
Vertical padding of the submit button has no effect. This seems to bea webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.
提交按钮的垂直填充无效。这似乎是一个webkit 错误。您可以通过指定显式高度并通过输入字段的顶部和底部填充来增加提交按钮的高度来解决该问题。
input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}
回答by Siebe
The problem is your padding that is applying wrong to your button. Trying solving it like this.
问题是您的填充对您的按钮应用错误。尝试像这样解决它。
input[type=submit], input[type=text] {
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
height: 30px; /* or whatever height necessary */
}
Additionally, you can keep the padding left and right on your button like this.
此外，您可以像这样在按钮上保持左右填充。
input[type=submit] {
background: #000;
color: #fff;
padding: 0px 9px;
}
回答by RobinJ
input {
height: 19px;
}
This maybe? Also, remove the padding property. http://jsfiddle.net/xkeshav/e6aTd/1/
这也许？此外，删除填充属性。 http://jsfiddle.net/xkeshav/e6aTd/1/
回答by luca
回答by fred727
Removing/adding line-height: 18px;for both is not a perfect solution because I see a little difference height in firefox...
删除/添加line-height: 18px;两者都不是一个完美的解决方案，因为我在 Firefox 中看到了一些高度差异......
The best solution I found is to put a div arround and set its style to display: flex.
我发现的最佳解决方案是放置一个 div arround 并将其样式设置为display: flex.
All is perfect this way.
这样一切都是完美的。
body {
background: #ccc;
}
div{
display: flex;
}
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 5px;
font-size: 25px;
border: 0;
margin: 0;
}
<div><input type="text" name="email" /><input type="submit" value="?" /></div>
回答by Anze Jarni
Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.
也许是填充造成了问题。尝试删除填充，将按钮设置为固定高度并使用 line-height 进行偏移。
