input、select居中不兼容浏览器的解决方法

发布时间：2018-09-12 15:20 所属栏目：29 来源：站长网

导读：css修正Input标签在各种浏览器中差异，首先说明一下input、select等可能在各种浏览器中的表现差异： 1.当input或select与其他标签(例如a、label)混排时，可能出现不居中的问题。 2.input里面输入的文字行高存在差别，有空隙等等。 3....混排时，外层标签不

　　css修正Input标签在各种浏览器中差异，首先说明一下input、select等可能在各种浏览器中的表现差异：

　　1.当input或select与其他标签(例如a、label)混排时，可能出现不居中的问题。

　　2.input里面输入的文字行高存在差别，有空隙等等。

　　3....混排时，外层标签不能控制表单标签。

　　已解决的，看下面演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Input标签在各种浏览器中差异 - Liehuo.Net</title> <style type="text/css"> body { font-family:"宋体"; font-size:12px; } table { border-collapse:collapse; border:solid red 1px; } td,th { border:solid red 1px; height:40px; } label { vertical-align:middle; } .inputtxt { width:200px; padding:0; font-family:"宋体"; font-size:12px; height:15px; line-height:15px; vertical-align:middle; border:solid #0000FF 1px; } </style> </head> <body> <form action="#" method="post"> <table> <tr> <th width="44">firt</th> <td ><input name="aj" type="text" maxlength="6" class="inputtxt" /> <label>知</label> <input type="text" maxlength="6" class="inputtxt" /></td> </tr> <tr> <th>second</th> <td> <input name="bs" type="text" maxlength="6" class="inputtxt" /></td> </tr> </table> </form> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）