当前位置：首页 → 问答吧 → input文本输入框的文字居中处理

input文本输入框的文字居中处理

时间：2011-09-15

来源：互联网

考虑到有些人会把文本输入框文字居中兼容性问题忽略掉，做了代码如下，搞了一些分析，哈哈

<!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=utf-8" /> <title>input测试</title> <style type="text/css"> /*reset.css*/ body{width:960px;margin:10px auto;padding:0;font:12px/1.5 Arial, Helvetica, sans-serif;} input { padding:0; } /***---测试高度解析，文本居中差异以及提示输入线差异---***/ .gb_sear input { font:16px "宋体", arial; /*font:16px arial;*/ height:28px; line-height:28px\9; _line-height:29px; width:14em; padding-left:4px; border:1px solid #ace; overflow:hidden; outline:none; } .gb_sear label { display:inline-block; position:relative; top:2px; *top:-4px; } /***---无关测试样式---***/ h1{padding:10px 0;font-size:14x;color:#f60;margin:0 0 20px 0;line-height:1.5;border-bottom:1px dashed #999;} .test,.test_result{border:1px solid #666;padding:10px;margin-top:10px;} .test_result li{line-height:1.7;color:#800000;} </style> </head> <body> <div class="test"> <h1>input文本居中测试</h1> <div class="gb_sear"> <label for="search">请输入搜索关键字:</label> <input type="text" id="search"/> </div> </div> <div class="test_result"> <h1>测试结论</h1> <ul> <li>"宋体"在行高的表现上，浏览器解析效果相当一致，除了那傻逼的IE6，用在表单文本输入框上亦是如此。使用arial则会出现兼容问题。</li> <li>非IE的标准浏览器，在对input文本输入框中的文字进行居中时，不必设置line-height。而chrome浏览器在遇到line-height声明时还会产生难看的输入提示线（位置和高度都不好看）。</li> <li>无论字体设置多大，使用什么字体族，IE6文本居中都会“出错”。一个好的解决方法是，对于IE6，把通用的line-height值增加一个像素，居中效果就相当完美了。</li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 xmlovedoudou 于 2011-9-15 11:46 编辑 ]

作者: xmlovedoudou 发布时间: 2011-09-15

我在chrome下测试并不是居中的。

作者: lijia2202 发布时间: 2011-09-15

我还没测试搞来看看

作者: boruntianxia 发布时间: 2011-09-15