2

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

4

2 回答 2

1

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

于 2013-06-19T23:19:04.780 回答
0

至于间距，请将其添加到 CSS 中：

.textarea_x {
    vertical-align: middle;
}
于 2013-06-19T23:48:25.880 回答