Html 这个<；span>；用{float:right]标记在IE7中拉伸容器

我有一个标签按钮，里面有一个Span来保存图标。它在所有浏览器中都能正常工作。当我应用float:right将Span移到右边时，它在除IE7之外的所有浏览器（Firefox、IE8+等）中都能正常工作（我知道……但我需要修复它）

因此，当SPAN向左浮动时，IE7可以正常工作。然而，一旦它向右浮动，它会将A标签容器拉伸100%

我不想改变HTML的结构，即插入另一个span以仅处理IE7或将span移到文本右侧，但我确实想用CSS修复它，尽管我尝试的方法对我来说还不太奏效

测试用例：（当SPAN位于左侧时，IE7工作正常）

---

测试用例：（IE7不工作，因为SPAN在右侧，容器正在拉伸）

将其绝对定位（）：

a{
显示：内联块；
边框：1px纯红；
高度：自动；
宽度：自动；
填充物：5px；
位置：相对位置；
右侧填充：1em；
}
跨度{
位置：绝对位置；
右：0；
显示：块；
高度：14px；
宽度：15px；
}

或者，另一个[更好的]解决方案是通过

:before

和

:after

伪元素（）添加字符：

---

注意：这在IE7中根本不起作用（没有额外的文本出现），但它也不会引入任何错误。

绝对定位它（）：

a{
显示：内联块；
边框：1px纯红；
高度：自动；
宽度：自动；
填充物：5px；
位置：相对位置；
右侧填充：1em；
}
跨度{
位置：绝对位置；
右：0；
显示：块；
高度：14px；
宽度：15px；
}

或者，另一个[更好的]解决方案是通过

:before

和

:after

伪元素（）添加字符：

---

注意：这在IE7中根本不起作用（没有额外的文本出现），但也不会引入任何错误。

删除float:left，改为使用IE7解决方案提供span display inline块：

a{
    display:inline-block;
    border:1px solid red;
    height:auto;
    width:auto;
    padding:5px;
}


a span{   
    display:inline-block;
    zoom:1; 
    *display: inline;
    height:14px;
    width:15px;    
}​

更新小提琴这里：

---

另外还有一篇关于ie7内联块解决方案的文章：

删除float:left，并为span display内联块提供ie7解决方案：

a{
    display:inline-block;
    border:1px solid red;
    height:auto;
    width:auto;
    padding:5px;
}


a span{   
    display:inline-block;
    zoom:1; 
    *display: inline;
    height:14px;
    width:15px;    
}​

更新小提琴这里：

---

另外还有一篇关于ie7内联块解决方案的文章：

尝试添加溢出：对标记可见。适用于stretchy button错误，不确定它是否会修复此问题。尝试添加溢出：对标记可见。适用于stretchy button错误，但不确定它是否会修复此问题

a{
    display:inline-block;
    border:1px solid red;
    height:auto;
    width:auto;
    padding:5px;
}


a span{   
    display:inline-block;
    zoom:1; 
    *display: inline;
    height:14px;
    width:15px;    
}​