输入和文本区域样式问题答案

【问题标题】：Input and Textarea styling issues输入和文本区域样式问题
【发布时间】：2013-06-19 21:04:59
【问题描述】：

所以这个问题一直困扰着我。假设我有两个输入字段和一个文本区域。由于某种原因，三者之间的间距不一致。无论我将边距值设置为什么，第一个输入到 textarea 之间的间隙与从 textarea 到第二个输入字段之间的间隙不同。

此外，输入字段和 textarea 上的边框和第一个字符的开头之间的空格以及应用于每个字符的字体样式都不一致。尽管我使用了 Eric Meyer 的 CSS 重置，但还是会发生这种情况，我希望这能解决这个问题。

最后一个问题（因为它似乎永远不会结束）是默认情况下，textarea 在 Internet Explorer 的一侧有一个滚动条，我可以通过使用 overflow: hidden 来摆脱它，尽管这会产生明显的问题......也许是更清洁的解决方案？

HTML

 <ul>
  <li><input type="text" name="title" class="input_x" value="Title" /></li>
  <li><textarea name="description" class="textarea_x">Description</textarea></li>
  <li><input type="text" name="title" class="input_x" value="Title" /></li>
 </ul>

CSS

  .input_x, .textarea_x {
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
   padding: 0;
   width: 100%;
   border: 1 solid #EEFF00;
   resize: none;
  }

  ul {
   list-style: none;
   padding-left: 0;
  }

  input {
   margin: 0;
   padding: 0;
  }

http://jsfiddle.net/rY87q/

【问题讨论】：

这是你想要的：jsfiddle.net/j08691/rY87q/1?
是的！这是解决了一个问题。非常感谢，伙计！

标签： html css

【解决方案1】：

我相信textarea { overflow: auto; } 正是您想要的。它隐藏滚动条，直到有足够的文本需要滚动条。这与所有现代浏览器兼容，因此没有跨浏览器格式问题。 Reference

【讨论】：

【解决方案2】：

至于间距添加到 CSS 中：

.textarea_x {
    vertical-align: middle;
}

【讨论】：