title: Alignment of <input type="submit"> in Chrome changes if value=""
body: <p>I have a simple HTML form with only two elements -- a text box and a submit button -- that need to be horizontally aligned.</p>
  
  <p>The button has a background image, and I would like to set its value="".</p>
  
  <p>In Safari and Firefox, the alignment is maintained if I set the line-height on the elements.</p>
  
  <p>In Chrome, however, this is not enough.  I have to set the value=" " (note the space), or give it another text value.  Otherwise, the elements shift.</p>
  
  <p>This is the HTML and css</p>
  
  <pre><code>&lt;form&gt;
      &lt;input type="text" id="email" class="textBox" /&gt;
      &lt;input type="submit" id="submitSubscribe" class="submitButton" value="" /&gt;
  &lt;/form&gt;
  
  .submitButton{
      width:30px;
      line-height:30px;
      background:url('');
  }
  
  .textBox{
      line-height:30px;
  }
  
  #email{
      width:146px;
  }
  </code></pre>
  
  <p>Here is my jsfiddle:
  <a href="http://jsfiddle.net/EmCQJ/5/" rel="nofollow">http://jsfiddle.net/EmCQJ/5/</a></p>
  
  <p>Does anybody know why Chrome calculates the alignment differently with the text in the value attribute than when the value is blank?  Leaving that space in the value feels like a hack solution to me, but I've tried all the obvious css fixes and still can't get it working.  Any input is greatly appreciated.  Thanks!</p>