input测试

/*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;}

input文本居中测试

请输入搜索关键字:

测试结论

"宋体"在行高的表现上，浏览器解析效果相当一致，除了那傻逼的IE6，用在表单文本输入框上亦是如此。使用arial则会出现兼容问题。非IE的标准浏览器，在对input文本输入框中的文字进行居中时，不必设置line-height。而chrome浏览器在遇到line-height声明时还会产生难看的输入提示线(位置和高度都不好看)。无论字体设置多大，使用什么字体族，IE6文本居中都会“出错”。一个好的解决方法是，对于IE6，把通用的line-height值增加一个像素，居中效果就相当完美了。

运行代码

复制代码

另存代码

提示：您可以先修改部分代码再运行