CSS图标文字对齐和表单输入框文字对齐兼容

张鑫旭的一篇文章，讲到20像素图标对齐和表单元素40像素对齐有所收获，谢谢@张鑫旭 ，很多观点跟平时的处理方式不谋而合，一般来说，我处理图标如果临近的话都会使用同样宽高，然后使用inline-block比较多，表单输入框和按钮以line-height:21-22为准。然后超出的用padding来补充。

以下摘录部分原文中的实践代码。

1.图标和文字对齐

一般的图标和文字对齐html代码：

<p><i class="icon"></i>前端开发博客</p>

<p><a href="javascript:" class="icon">删除</a>前端开发博客</p>

zxx的CSS代码：

p{line-height:20px; font-size:14px;}
.icon {
    display: inline-block;
    width:20px; height:20px;
    background: ...;
    white-space:nowrap;
    letter-spacing: -1em;
    text-indent: -99em;
    color: transparent;
    /* IE7 */
    *text-indent: 0;
    *zoom: expression( this.runtimeStyle[‘zoom‘] = ‘1‘, this.innerHTML = ‘\3000‘);
}
.icon:before {
    /* 伪元素插入空格文本 */
    content: ‘\3000‘;
}

这个代码主要是通过line-height来控制图标的文字和临近的文字同样行高，实现在同一行中。

2.表单输入框和内容对齐

简单的一个文字和文本输入

<div class="clearfix mt15">
<label class="left">手机号<span class="red abs">*</span></label>
<div class="cell">
<input type="tel" class="ui_input" name="tel" required="">
</div>
</div>

CSS代码：

body{font:14px/1.42858 ‘microsoft yahei‘, arial, sans-serif; -webkit-font-smoothing: antialiased; } /*行高为20像素*/
.cell {
display: table-cell;
*display: inline-block;
width: 2000px;
*width: auto;
}
input.ui_input,
.ui_input > input {
height: 20px;
line-height: 20px;
padding: 9px 8px;
border: 1px solid #d0d0d5;
border-radius: 4px;
background-color: #fff;
font-size: 14px;
outline: none;
color: #545a6c;
-webkit-transition: border-color .15s, background-color .15s;
transition: border-color .15s, background-color .15s;
}

参考文章：以20像素为基准的CSS网页布局实践分享