一直以来icon和文本需要对齐都使用vertical-align: middle;的方法，但兼容性不理想。参考了鑫旭大大的博客，终于收获不用vertical-align可以对齐的神技，原博点这里。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>icon对齐神技</title><style type="text/css">a {text-decoration: none;color: #333;}/*全局统一lineheight,与icon高度一致*/body {font-size: 14px;line-height: 20px;}.icon {display: inline-block;background: url('toplist.png') no-repeat 2px -139px;width: 20px;height: 20px;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';}</style>
</head>
<body><p style="color:blue;">使用空标签i</p><a href="#"><i class="icon"></i>某些东西</a><p style="color:blue;">使用a标签，标签内有文字</p><p ><a href="#" class="icon">某些东西</a>某些东西</p>
</body>
</html>转载于:.html
本文发布于:2024-02-02 21:51:53，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170688191146672.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
