css 文字与小图标对齐

时间:2023-03-08 17:09:27
.icon {
display: inline-block;
width:20px; height:20px;
background: url(delete.png) no-repeat center;
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';
}
HTML代码:
<strong>情形1,空标签</strong>
<p><i class="icon"></i> 删除</p>
<strong>情形2,内部有文字</strong>
<p><a href="javascript:" class="icon">删除</a> 后面的文字</p> <p style="color:gray;">--------下面是反例------</p> <strong>设置了overflow:hidden</strong>
<p><i class="icon" style="overflow:hidden;"></i> 删除</p>