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

【问题标题】：How can I control the height of text inputs and submit input buttons in different browsers?如何控制文本输入的高度并在不同的浏览器中提交输入按钮？
【发布时间】：2016-03-15 05:32:50
【问题描述】：

我有一个很小但很难（对我来说）的问题要解决。

我有一个文本输入和一个提交按钮。我需要它们的高度完全相同，并且在 Chrome 和 Firefox（理想情况下也是 Internet Explorer）中也是如此。

HTML

<input type="text" name="email" /><input type="submit" value="»" />

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

我已经在 jsfiddle here.

上设置了这个基本代码

你应该注意到，如果你在 chrome 中加载它，按钮的高度小于文本输入，而在 Firefox 中，它更大。

我错过了什么？

【问题讨论】：

提示：当你只应用单个属性时不要使用速记属性background（background-color这里）

标签： html css

【解决方案1】：

为两者删除/添加line-height: 18px;。

【讨论】：

这为文本输入创建了一致的高度，但按钮在 Firefox 中仍然保持不同的高度。

【解决方案2】：

提交按钮的垂直填充无效。这个seems to be 一个webkit bug。您可以通过指定显式高度并通过输入字段的顶部和底部填充增加提交按钮的高度来解决此问题。

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

【讨论】：

【解决方案3】：

问题是您的按钮应用错误的填充。尝试像这样解决它。

输入[类型=提交]，输入[类型=文本] { 字体大小：18px；行高：18px；向左飘浮; 边框：0；显示：块；边距：0；高度：30px； /* 或任何必要的高度 */ }

此外，您可以像这样在按钮上保持左右填充。

输入[类型=提交] { 背景：#000；颜色：#fff; 填充：0px 9px； }

【讨论】：

【解决方案4】：

input {
 height: 19px;
 }

这可能吗？此外，删除填充属性。 http://jsfiddle.net/xkeshav/e6aTd/1/

【讨论】：

【解决方案5】：

也许是填充造成了问题。尝试删除填充，将按钮设置为固定高度，并使用 line-height 进行偏移。

【讨论】：

【解决方案6】：

您需要删除高度并仅通过填充/字体大小来处理输入文本字段的实际高度

jsfiddle

【讨论】：

【解决方案7】：

为两者删除/添加line-height: 18px; 并不是一个完美的解决方案，因为我在 Firefox 中看到了一点高度差异......

我找到的最佳解决方案是放置一个 div arround 并将其样式设置为 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;
    }
    &lt;div&gt;&lt;input type="text" name="email"  /&gt;&lt;input type="submit" value="»" /&gt;&lt;/div&gt;

【讨论】：

【解决方案8】：

试试

body {
    background-color: #ccc;
}

input[type=text] {
  width: 218px;
}

Working DEMO

【讨论】：