title: Try to align a span and an input
body: <p>I have two buttons, one implemented as an input, the other as a span. They are put side by side with:</p>
  
  <pre><code>{ display:inline-block; }
  </code></pre>
  
  <p>The buttons are rendered from a customized tag and a class name is added dynamically in jsp. In css, there are some definition for shadow, for background gradient, for padding, and for font. They do use some CSS3 like border-radius.</p>
  
  <p>But in Firefox, the height of the span button is 18 while the input 20. Interestingly, the height of them in IE 8 are both 25px, why?</p>
  
  <p>Now I need them to be of the same height and aligned horizontally.</p>
  
  <p>Update:
  Now I have those two buttons in jsfiddle. Use height:22px; and vertical-align:top; won't help much.</p>
  
  <p><a href="http://jsfiddle.net/gBeCP/" rel="nofollow">http://jsfiddle.net/gBeCP/</a></p>