做了一天的小按钮基本都是文字+小图标的组合，问题挺多处理的不好，现在总结一下做个了断。
//页面结构 <span class="b"> <a href="#" title="订阅博客">订阅博客</a> <em class="ico"></em> </span>
其实结构可以很简单一个a元素设置padding-right或者padding-left的距离设置添加背景图标。
但是这样的话用合并的背景图不好使，尤其是一个图标反复用在对应不同大小元素的时候，每次都需要对css做出调整，而且对背景图标的位置要很好的前期规划。
这种父元素套文本和ico的方法虽然增加了dom数，但是开发和反复使用还是很方便的。
两种方法，酌情选择。
没有添加宽和高的内联元素
仔细看看 没有一个浏览器是一样的
inline-block之后的内联元素
ie8有变化
设置宽100px 高12px和inline-block之后的内联元素
ie6没变化
ie8还有点纠结
最终方案
IE6/IE8文本位置靠左1px
IE8图标差1px
最后我决定就到这了，有人肯定会说用通过hark能调整到最最完美，是的。
可是文字图标的大小不同肯定还会有很多细微的变化，项目里的变化更是。。。
想想明天还有很多工作要干，我决定先睡了。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>内联元素块级化文字和图标的位置</title> <style type="text/css"> *{margin: 0;padding: 0;line-height: 1;} a{text-decoration: none;} a:hover{text-decoration: underline;} .ico{background: url(http://static.blog.csdn.net/images/ico_view.png) no-repeat;position: relative;display: inline-block;} .b{font-size: 12px;width:65px;height:12px;margin:200px auto;background-color: #ececec;border: 1px solid #ccc;text-align: center;margin-left: 20px;font-size: 0;display: inline-block;overflow: hidden;} .b a{font-size: 12px;} .b em{width: 10px;height: 10px;} </style> </head> <body style="padding-top:20px;"> <span class="b"> <a href="#" title="订阅博客">订阅博客</a> <em class="ico"></em> </span> </body> </html>