IE8 span 元素内的图片把文字挤下来i1

项目背景：在 IE9 上面正常显示，项目需要在 IE8 上显示，然后在 IE8 上面打开样式错乱。

需要的样式是这样的：图标右边显示文字，图标与文字同行。

代码:

<span style="position:absolute;top:25px;right:100px;color:red;font-weight:bold;">
<img style="position: relative;right: 50px" src="l.png">笔心
</span>

然后在 IE9 上面显示：

但是在 IE8 上面显示：

文字发生了换行现象，没有定为到哪里发生了问题，而且单独再写没有发生类似的现象，不知道为什么会发生这样的现象，尝试了很多，发现只要 span 标签中间有 img 标签就发生换行，需要给 span 固定宽度，但是我取到的数字值是不一定的，如果固定宽度，取到的数字长度变化后，样式也会发生变化，与起它样式发生冲突，最后的解决方法是用浮动去固定，代码：

<div style="position: absolute;top: 20px;right: 40px;width: 120px">
    <span style="float: right">2oo个爱心</span>
    <img style="position: relative;right: 20px;float: right" src="l.png" >
</div>

然后得到了想要的样式。