Different heights of input boxes in IE, firefox and chrome

Question

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.

The idea is to have a fieldset of rows, each row as an <li> 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 <div> or <span> here but still having the effects below).

For the buttons i tried <button>, <a>, <input> (button) and <input> (submit).

My CSS is designed to render the inner box of label, input and buttons with a height of 15px, and add padding and borders.

In chrome all works fine, everything has height 15px as expected.

In IE all has 15px except the input fields that get an inner box of 13.8 distorting the value help.

In FF all buttons except the <a> button have inner height 17px.

You can try in jsfiddle: http://jsfiddle.net/sheogorat/kk3ffmwp/

Here is my CSS:

/* 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 > 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; }

And my HTML

<fieldset>
 <ul>
  <li>
   <label for="name2">Name</label>
   <input class="in-f4" id="name2" name="name2" type="text"/><input class="in-f4ico">
   <label for="name22">to</label>       
   <input class="in-f4" id="name22" name="name22" type="text"/><input class="in-f4ico">
  </li>
  <li>
   <label for="bbtn2">Button:</label>
   <input type="button" class="btn" id="bbtn2" value="<input>" onclick="javascript:alert('Wow!')">
   <a class="btn" id="abtn2" onclick="javascript:alert('Wow!')">&lt;a&gt;</a>
  </li>
  <li>
   <label for="bbtn22">More Buttons:</label>
   <button class="btn" id="bbtn22" onclick="javascript:alert('Wow!')">&lt;button&gt;</button>
   <input type="submit" class="btn" id="bbtn23" value="<submit>" onclick="javascript:alert('Wow!')">
  </li>
 </ul>   
</fieldset>

Answer 1

Add height:21px;to the .btn class. Look at the fiddle, it works fine now. http://jsfiddle.net/kk3ffmwp/2/