Question

发现它，抱歉，更改填充并忘记更改textarea。我的错。将删除）

我正在尝试在同一行上创建带有文本输入和textarea输入的表，但不能使textarea与文本输入的高度相同。任何人都可以告诉我，为什么文本输入和textarea有不同的高度以及如何解决这个问题？正如您所看到的，textarea高出2px，而chrome检查员告诉我同样的情况。怎么了，怎么解决？（对不起，一个大文本，网站告诉我，我有“大部分代码”，并且必须添加一些细节。不知道，我还可以添加什么代码，问题很明显）））谢谢！

div
{
    background: #ddd;
}
input#te
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
    background: transparent;
    height: 5em;
    line-height: 5em;
    vertical-align: middle;
}
textarea#ta
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
    background: transparent;
    height: 5em;
    vertical-align: middle;
    resize: none;
}

<table>
    <tr>
        <td>
            <div>
                <input type=text id="te" value="input is 2px smaller in chrome">
            </div>
        </td>
        <td>
            <div>
                <textarea id="ta">textarea is 2px higher in chrome</textarea>
            </div>
        </td>
    </tr>
</table

Answer 1

textarea填充了上下2px，

输入仅为1px。

Answer 2

更改textarea上的填充：

＆＃13;

div
{
    background: #ddd;
}
input#te
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
    background: transparent;
    height: 5em;
    line-height: 5em;
    vertical-align: middle;
}
textarea#ta
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding: 1px 0.5em;        
    margin: 0;
    background: transparent;
    height: 5em;
    vertical-align: middle;
    resize: none;
}

＆＃13;

<table>
    <tr>
        <td>
            <div>
                <input type=text id="te" value="input is 2px smaller in chrome">
            </div>
        </td>
        <td>
            <div>
                <textarea id="ta">textarea is 2px higher in chrome</textarea>
            </div>
        </td>
    </tr>
</table

＆＃13;

Answer 3

要解决此问题，请将box-sizing: border-box添加到input元素和textarea元素（以便在Chrome中使用此修复程序）。

＆＃13;

div {
  background: #ddd;
}
input#te {
  position: relative;
  outline: 0;
  border: 1px solid #a78;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin: 0;
  background: transparent;
  height: 5em;
  line-height: 5em;
  vertical-align: middle;
  box-sizing: border-box;
}
textarea#ta {
  position: relative;
  outline: 0;
  border: 1px solid #a78;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin: 0;
  background: transparent;
  height: 5em;
  vertical-align: middle;
  resize: none;
  box-sizing: border-box;
}

＆＃13;

<table>
  <tr>
    <td>
      <div>
        <input type=text id="te" value="input is 2px smaller in chrome">
      </div>
    </td>
    <td>
      <div>
        <textarea id="ta">textarea is 2px higher in chrome</textarea>
      </div>
    </td>
  </tr>
</table>

＆＃13;

Answer 4

box-sizing: border-box;是您需要放置在输入和文本区域的内容。也适合选择。

使用box-sizing: border-box;表示您无需调整所有宽度，填充和线高，并且可以使所有内容都相同

div
{
    background: #ddd;
}
input#te
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
    background: transparent;
    height: 5em;
    line-height: 5em;
    vertical-align: middle;
box-sizing: border-box;
}
textarea#ta
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
    background: transparent;
    height: 5em;
    vertical-align: middle;
    resize: none;
box-sizing: border-box;
}

<table>
    <tr>
        <td>
            <div>
                <input type=text id="te" value="input is 2px smaller in chrome">
            </div>
        </td>
        <td>
            <div>
                <textarea id="ta">textarea is 2px higher in chrome</textarea>
            </div>
        </td>
    </tr>
</table

为什么textarea高于文本输入？

4 个答案: