输入和Textarea样式问题

Question

So this question has been sort of hounding me. Let's say I have two input fields and a textarea. For some reason, the spacing between the three is inconsistent. The gap between the first input to the textarea is different than that from the textarea to the second input field, no matter what I set the margin values to.

Additionally, the whitespace between the border and the start of the first character on both the input field and textarea is inconsistent, as well as the font styles applied to each. This occurs despite me using Eric Meyer's CSS reset, which I had hoped would fix the issue.

And a final issue (as it seems to never end) is that the textarea by default has a scrollbar to the side in internet explorer that I can rid by using overflow: hidden, although this creates obvious problems... Is there perhaps a cleaner solution?

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

I believe that textarea { overflow: auto; } textarea { overflow: auto; } is exactly what you are looking for. It hides the scrolling bar until there is enough text to have need for the bar. This is compatible with all modern browsers so no cross-browser formatting problems. Reference

Answer 2

As for the spacing add this to the CSS:

.textarea_x {
    vertical-align: middle;
}