在开发中遇到了这样的一个问题,经过谈论,出现了解决方案: 这是CSS代码: <mce:style type="text/css"><!-- * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .inputelement { padding:10px; } .intext { border:1px solid #ccc; padding:6px; } ul { width:600px; list-style:none;} li { border:1px solid #ccc; padding:10px; } input { vertical-align:middle; } p { line-height:30px;} --></mce:style><style type="text/css" mce_bogus="1">* { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .inputelement { padding:10px; } .intext { border:1px solid #ccc; padding:6px; } ul { width:600px; list-style:none;} li { border:1px solid #ccc; padding:10px; } input { vertical-align:middle; } p { line-height:30px;}</style> 这是HTML静态代码: <div class="inputelement"> <ul> <li> 用户名: <label> <input type="text" class="intext" value="ziter72" /> </label> <input type="radio" value="radio" /> <label for="radio1" style="display:inline-block;" mce_style="display:inline-block;">input元素与文字</label> <input type="checkbox"/> <label for="checkbox" style="display:inline-block" mce_style="display:inline-block">input元素与文字</label> </li> </ul> <p>解决问题:</p> <p>1.文本框与前后文字的垂直对齐</p><p>2.文本框内部文字在FF下的垂直居中</p><p>3.单选、复选等input元素与文本框的垂直对齐</p><p>4.单选、复选等input元素与前后文字的垂直对齐</p> </p> <p>最终效果:基本上解决了表单元素在IE跟FF下的效果。虽然还存在有少许的错位,不过已经在可以容忍的范围内了。</p> </div>