html - IE、firefox、chrome输入框高度不同

Question

在字段集中的行中定义带有输入字段的表单时，IE、FF 和 chrome 会导致输入字段的高度不同。我希望有人可以帮助我修复所有浏览器的高度。

想法是有一个行字段集，每一行都是一个<li>。带有许多内联/内联 block 元素。这些行可能包含标签输入字段和按钮。某些输入字段可能添加了“值帮助”按钮以打开弹出窗口。 valuehelp 是另一个带有背景图像的输入。 (这里也成功试过<div>或<span>但还是有下面的效果)。

对于我试过的按钮 <button> , <a> , <input> (按钮)和 <input> (提交)。

我的 CSS 旨在渲染高度为 15px 的标签、输入框和按钮的内框，并添加填充和边框。

在 chrome 中一切正常，一切都像预期的那样具有 15px 的高度。

在 IE 中，除了输入字段获得 13.8 的内部框扭曲值帮助外，所有字段都有 15px。

在 FF 中除了 <a> 之外的所有按钮按钮的内部高度为 17px。

您可以在 jsfiddle 中尝试:http://jsfiddle.net/sheogorat/kk3ffmwp/

这是我的 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; }

还有我的 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

将 height:21px; 添加到 .btn 类。看看 fiddle ，它现在工作正常。 http://jsfiddle.net/kk3ffmwp/2/