Question

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

我有一个文本输入和一个提交按钮。我需要它们才能达到完全相同的高度，在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中，它的大小。

我错过了什么？

Answer 1

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

Answer 2

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

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

Answer 3

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

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

Answer 4

input {
 height: 19px;
 }

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

Answer 5

也许是填充物出现问题。尝试移除填充，将按钮设置为固定高度，并使用行高进行偏移。

Answer 6

您需要删除高度并仅使用padding / font-size

处理输入文本字段的实际高度

jsfiddle

Answer 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;
    }
    <div><input type="text" name="email"  /><input type="submit" value="»" /></div>

Answer 8

TRY

body {
    background-color: #ccc;
}

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

Working DEMO

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

8 个答案: