html - 输入和文本区域样式问题

Question

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

此外，输入字段和文本区域中第一个字符的边框和开头之间的空格不一致，应用到每个字段的字体样式也不一致。尽管我使用了 Eric Meyer 的 CSS 重置，但我希望它能解决这个问题，但还是会出现这种情况。

最后一个问题(因为它似乎永远不会结束)是默认情况下文本区域在 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/

Answer 1

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