title: Different heights of input boxes in IE, firefox and chrome
body: <p>While defining a form with input fields in rows in a fieldset, IE, FF and chrome result in different heights for the input fields. I hope someone can help me to fix the heights across all browsers.</p>
  
  <p>The idea is to have a fieldset of rows, each row as an <code>&lt;li&gt;</code> with a number of inline / inline-block elements. the lines may contain labels input fields and buttons. some input fields may have a "value help" button added to open a popup. the valuehelp is another input with a background image. (also successfully tried <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> here but still having the effects below).</p>
  
  <p>For the buttons i tried <code>&lt;button&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;input&gt;</code> (button) and <code>&lt;input&gt;</code> (submit).</p>
  
  <p>My CSS is designed to render the inner box of label, input and buttons with a height of 15px, and add padding and borders.</p>
  
  <p>In chrome all works fine, everything has height 15px as expected.</p>
  
  <p>In IE all has 15px except the input fields that get an inner box of 13.8 distorting the value help.</p>
  
  <p>In FF all buttons except the <code>&lt;a&gt;</code> button have inner height 17px.</p>
  
  <p>You can try in jsfiddle: <a href="http://jsfiddle.net/sheogorat/kk3ffmwp/" rel="nofollow">http://jsfiddle.net/sheogorat/kk3ffmwp/</a></p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>/* CSS reset
  /*==========================================*/
  html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, 
  pre, dl, dt, dd, ol, ul, li, fieldset, legend, form, table, th, td,
  input, textarea, input, label, select, button {
  margin: 0px;
  padding: 0px;
  font-family:arial,sans-serif;
  font-size:12px;
  line-height:15px;
  color: black;
  text-align: left;
  vertical-align:bottom;
  }
  th,b,strong,h1,h2,h3,h4,h5,h6 { font-weight: bold; }
  body { background-color:#F0F0F0; }
  th, td  { padding: 2px 4px 2px 4px; }
  ol, ul, li { list-style: none outside none; }
  h1, h2, h3, h4, h5, h6 {
  padding: 18px 5px 6px 5px;
  clear: both;
  }
  h1 { font-size:18px; }
  h2 { font-size:17px; }
  h3 { font-size:16px; }
  h4 { font-size:15px; }
  h5 { font-size:14px; }
  h6 { font-size:13px; }
  
  /* Fieldsets and input fields
  /*==========================================*/
  fieldset {
  display:inline-block;
  vertical-align:top;
  border:#A8A8A8 thin solid;
  margin:3px 30px 3px 0px;
  padding:3px 5px 3px 5px;
  }
  input, select {
  padding:2px 5px 2px 5px;
  background-color:white;
  border:#C0C0C0 thin solid;
  cursor:text;
  }
  .btn  {
  display:inline-block;
  padding: 2px 5px 2px 5px;
  background-color:#FFAD33;
  border: #686868 thin solid;
  border-left-width:10px;
  cursor:pointer;
  width:200px;
  text-align:center;
  box-sizing:border-box;
  }
  fieldset li {
  padding:2px 0px 1px 0px;
  }
  li &gt; label {
  display:inline-block;
  padding: 3px 5px 2px 5px;
  }
  li label:first-child {
  border-left: #686868 6px solid;
  white-space:nowrap;
  overflow-x: hidden;
  width:120px;
  max-width:120px;
  }
  .in-f4 {
  border-right-style:none;
  }
  .in-f4ico {
  border-left-style: none;
  width:15px;
  height:15px;
  cursor:pointer;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUA\
  AAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAABdSURBVDhP3c7RDcAgCARQR2KuTsHmVzUxQT1s0X6V5CXmBDQB\
  OEbDKBpG0TCKhlE0HIkIPOV+GlDVKavNVz4O3CWFfcnzasmqfrikyXXwE9PfDTefLXli+7vhPUg36eoPxJO8wCUAAAAASUVORK5CYII=");
  background-repeat:no-repeat;
  }
  .in-f4ico:hover { background-color:#C0C0C0; }
  </code></pre>
  
  <p>And my HTML</p>
  
  <pre><code>&lt;fieldset&gt;
   &lt;ul&gt;
    &lt;li&gt;
     &lt;label for="name2"&gt;Name&lt;/label&gt;
     &lt;input class="in-f4" id="name2" name="name2" type="text"/&gt;&lt;input class="in-f4ico"&gt;
     &lt;label for="name22"&gt;to&lt;/label&gt;       
     &lt;input class="in-f4" id="name22" name="name22" type="text"/&gt;&lt;input class="in-f4ico"&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;label for="bbtn2"&gt;Button:&lt;/label&gt;
     &lt;input type="button" class="btn" id="bbtn2" value="&lt;input&gt;" onclick="javascript:alert('Wow!')"&gt;
     &lt;a class="btn" id="abtn2" onclick="javascript:alert('Wow!')"&gt;&amp;lt;a&amp;gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;label for="bbtn22"&gt;More Buttons:&lt;/label&gt;
     &lt;button class="btn" id="bbtn22" onclick="javascript:alert('Wow!')"&gt;&amp;lt;button&amp;gt;&lt;/button&gt;
     &lt;input type="submit" class="btn" id="bbtn23" value="&lt;submit&gt;" onclick="javascript:alert('Wow!')"&gt;
    &lt;/li&gt;
   &lt;/ul&gt;   
  &lt;/fieldset&gt;
  </code></pre>