Html 如何在不同浏览器中控制文本输入和提交输入按钮的高度？

我有一个很小但很难解决的问题

我有一个文本输入和一个提交按钮。我需要它们的高度完全相同，这在Chrome和Firefox上都是如此，最好是在internet explorer上也是如此

HTML

我已经在

你应该注意，如果你在chrome中加载它，按钮的高度比文本输入的要小，而在firefox中，按钮的高度更大

---

我遗漏了什么？

删除/添加

行高：18px两者都适用。
可能是填充造成了问题。尝试删除填充，将按钮设置为固定高度，并用行高进行偏移。
提交按钮的垂直填充无效。这是一个很好的例子。您可以通过指定explit height并通过输入字段的顶部和底部填充来增加submit按钮的高度来解决此问题

input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}

试一试


也许是这个？
另外，删除padding属性。
问题在于您的填充错误地应用于按钮。
试着这样解决它

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 */
}
input[type=submit] {
  background: #000;
  color: #fff;
  padding: 0px 9px;
}
输入[类型=提交]，输入[类型=文本]{
字号：18px；
线高：18px；
浮动：左；
边界：0；
显示：块；
保证金：0；
高度：30px；/*或任何必要的高度*/
}
此外，您可以像这样在按钮上保持左右填充

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 */
}
input[type=submit] {
  background: #000;
  color: #fff;
  padding: 0px 9px;
}
输入[类型=提交]{
背景：#000；
颜色：#fff；
填充：0px 9px；
}
您需要删除高度，只需通过填充/字体大小来处理输入文本字段的实际高度

删除/添加
行高：18px对于两者都不是一个完美的解决方案，因为我看到firefox中的高度有一点不同

我找到的最佳解决方案是在周围放置一个div，并将其样式设置为
display:flex

这样一切都很完美



    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;
    }
提示：当您仅应用单个属性（
此处背景色
）时，不要使用速记属性
背景色
），这为文本输入创建了一致的高度，但该按钮在firefox中仍然保持不同的高度。


    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;
    }