[原]输入框对齐问题
Ghost 发表于 [2009-07-17 15:00]
最近做了一个表单的页面，被输入框的对齐问题烦死了，相信觉得烦的不只我一个，整理下相关的代码，包括输入框内、外文字的对齐。希望对大家有用：
<label><input type="radio" name="info_name" />名称</label>
<label>名称：<input type="text" class="input_text l_type" /></label>
input{
vertical-align:middle;
}
input[type="radio"]{
vertical-align:-1px;
vertical-align:middle\9;
}
.input_txt{
height:18px;
height:22px\9;
padding-left:1px;
padding-top:4px;
padding-top:0\9;
border:1px solid #B3D0DF;
*line-height:22px;
} 另外，跟大家分享下这次发现的终级hack，比之前《 最新CSS兼容方案 》的简单些：
.e{
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
.e{
background-color:#FF5500;/* OP */
}
} 文章地址：http://www.cssforest.org/blog/index.php?id=141
《[原]输入框对齐问题》采用的授权是创作共用的 “署名-非商业性使用-相同方式共享 3.0 通用许可”.
文章被分类到：CSS
weilaixu 在 419 日 之前 说：
color:#FFF;/* FF,OP */
……..all
悉尼 在 418 日 之前 说：
这输入框对齐的问题最麻烦了
谢谢分享阿
moondy 在 416 日 之前 说：
做为一种布局方案，这么久以来CSS对很常见的垂直居中都没有很好地解决，总是让人郁闷
paradisezj 在 412 日 之前 说：
鬼哥这篇文章的页面显示在首页貌似有点问题啊
Ghost 在 412 日 之前 说：
@paradisezj 浏览器兼容性的问题，试下其它浏览器:)
5ivedance 在 402 日 之前 说：
一直记不住那么多hack，每次都用基本也只会用这个终极hack。顺序不能打乱，*在中间_在之后
若比邻 在 380 日 之前 说：
为什么我测试还是没对齐啊？ie下哪个单选按钮偏下，ff下偏上，文字也好像偏上一点
xixi 在 357 日 之前 说：
input[type=“radio”] ie6无视
shadow 在 357 日 之前 说：
鬼哥，最后一句 *line-height:22px;
是不是应该改成：
line-height:22px\9;
明明 在 133 日 之前 说：
height:22px\9;什么意思