移动端实现 iphone android 小图标 文字排版

情景描述：

在手机浏览器中展示一些数据，这些数据前面都小图标，要求：小图标和文字水平对齐。

效果图

问题分析：

对于图文横排的问题，有很多的解决办法，但是究其根本还是将图片和文字放在同一行上进行展示。

实现方案：

方案一：

写法上很简单，但是这个的兼容性有很大问题。

</pre><pre name="code" class="css">.m-icon{
display:inline-block; 
vertical-align:middle;
 padding-right:1em;
 height:1em;
 background-image:url(icon.png);
 background-size:1em;
 background-repeat:no-repeat;
}
.m-icon.star{
background-position:npx npx;
}
.m-icon.like{
background-position:npx npx;
}
.m-icon.share{
background-position:npx npx;
}
.m-text{
display:inline-block;
vertical-align:middle;
font-size:1em;
}

</pre><pre code_snippet_id="617032" snippet_file_name="blog_20150311_24_7490927" name="code" class="html"><i class="m-icon star"></i><span></span>
<i class="m-icon like"></i><span></span>
<i class="m-icon share"></i><span></span>

tip:这种写法非常简单，利用css3的inline-block属性便可以实现对齐，但是这个在android手机显示比较好，iphone手机则会有明显的对不齐的问题。

方案二：

.text{padding-left:1em;}
.star{background:url() XX XX;}
.like{background:url() XX XX;}
.shre{background:url() XX XX;}

<span class="text star"></span>
<span class="text like"></span>
<span class="text sahre"></span>

借助元素的左侧内边距，实现小图标对齐，这种写法iphone支持很不错，但是android不行。

方案三：

<img src="" alt="" style="vertical-align:middle;" align="absmiddle"><span></span>
<img src="" alt="" style="vertical-align:middle;" align="absmiddle"><span></span>
<img src="" alt="" style="vertical-align:middle;" align="absmiddle"><span></span>

img 本身具有inline-block特性 android显示正常，iphone不行。

尝试过很多的写法，都没能做到一种写法同时支持两个平台的，只能妥协，如果有大牛知道有更好的办法，一定要不吝赐教，我也希望我能够知道的更多，用最简单的办法解决复杂的问题。

补充：

有效方案：

<span><i></i>23</span>
<span><i></i>23</span>
<span><i></i>23</span>

span{
    displayinline-block;
}
span i{
    display:inline-block;
    width:18px;
    height:18px;
    vertical-align:text-top;
    background:XXXX;
}

目前测试两种平台都正常

text-top:把元素的顶端与父元素字体的顶端对齐；

middle：把元素放置父元素中部；但是这种因为不同系统导致解析的文字高度或者说基线不一致而导致小图标不能与文字对齐。

---补充---

目前css3发展迅速，很多的浏览器也在积极响应，如果应用场景没有ie的话可以考虑使用font的方法，生成需要的字体文件，设置好文字基线，就能很轻松实现了。