Question

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

我们的想法是拥有行的字段集，每行为<li>，并带有多个内联/内联块元素。这些行可能包含标签输入字段和按钮。某些输入字段可能会添加“值帮助”按钮以打开弹出窗口。 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类。看看小提琴，它现在运作正常。 http://jsfiddle.net/kk3ffmwp/2/

IE，firefox和chrome中输入框的不同高度

1 个答案: